从 html 文档中提取 css 样式到外部 css 文件答案

【问题标题】：Extract css styles from html document to external css file从 html 文档中提取 css 样式到外部 css 文件
【发布时间】：2013-08-04 15:30:50
【问题描述】：

有没有办法将 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 }

【问题讨论】：

标签： javascript python html css extract

【解决方案1】：

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

http://extractcss.com/

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

【讨论】：

【解决方案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/

【讨论】：