從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/