html - 如何将html样式标签提取到css中

Question

我试图从 div html 中自动提取标签样式的一部分。我有 100 种样式组合，因此无法手动进行。这是html样式标签的路径-->css

.rule1 { 
  background-color: rgb(196, 0, 143);
}

.rule { 
  background-color: rgb(230, 176, 18);
}

<div class="line line--big line--active" role="button" 
   style="background: rgb(196, 0, 143) none repeat scroll 0% 0%; color: white; opacity: 1;"><span>1</span></div>
<div class="line line--big line--active" role="button"
   style="background: rgb(230, 176, 18) none repeat scroll 0% 0%; color: white; opacity: 1;"><span>5</span></div>

注意:这个问题没有重复，因为我的代码中没有 style 标签。我已经搜索过其他答案，但他们zurb 链接现在已关闭 http://zurb.com/ink/inliner.php在这里你需要样式标签: JavaScript Regex to Extract Text from Style HTML Tags还有这里: Convert css from html style tag into inline css

Answer 1

方法 1:extractCSS - 在线 CSS 提取器

extractCSS 是一个 JavaScript 库和在线工具，可让您从 HTML 文档中提取元素 ID、类和内联样式并将它们输出为 CSS。

注意:不完全是你要找的东西，但如果你不介意复制和粘贴你的 HTML，试试这个。功能不多，但足够用了!

http://extractcss.com/

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

方法 2:使用 Jquery:

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

HTML:

<style></style>
<div style="background-color: red; height:300px; width:200px;">
<a style="font-weight: bold">Link</a>
</div>

Jquery

$(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);
});