将html文档中的css样式提取到外部css文件中

Extract css styles from html document to external css file

本文关键字：css 外部 文件 提取 样式 html 文档      更新时间：2023-09-26

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

这并不完全是您想要的，但如果您不介意复制和粘贴HTML，请尝试一下。没有太多的功能，但它做的工作！

http://extractcss.com/

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

您可以使用一些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/

相关文章：