javascript - 从 html 文档中提取 css 样式到外部 css 文件

Question

有没有办法将 html 文档中的硬编码样式提取到外部 css 文件？如果没有，您是否知道如何执行此操作？你以前做过吗？

示例，来自：

<div style="background-color: red">
<a style="font-weight: bold"></a>
</div>

至

<div id='st-01'>
<a id='st-02'><a/>
</div>

#st-01 { background-color: red }
#st-02 { font-weight: bold }

Answer 1

不完全是您要查找的内容，但如果您不介意复制和粘贴 HTML，请尝试此操作。没有太多的功能，但它的工作！

http://extractcss.com/

https://github.com/peterlazzarino/Inline-CSS-Extractor

Answer 2

您可以使用一些 JS/JQuery 代码来提取样式、清除它们、给元素一个 ID 并添加 css。检查这个例子，你可以进一步扩展它。

$(document).ready(function(){
    var i = 0;
    var css = "";
    $("div,a").each(function(){
        $(this).attr("id","st-"+i);
        css += "#"+$(this).attr("id")+"{"+$(this).attr("style")+"}";
        $(this).removeAttr("style");
        i++;
    });
    $("style").html(css);
});

http://jsfiddle.net/d8TaJ/