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

Posted 2023-02-22

【中文标题】如何将html样式标签提取到css中

【英文标题】：How to extract html style tag into css

【发布时间】：2020-12-10 20:53:51

【问题描述】：

我正在尝试从 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

【问题讨论】：

您想从文档的 div 中删除样式属性，或者您的 html 仍然是一个字符串？

我想从 html 中删除样式。谢谢指点。

您想将html样式标签移除或提取到css中吗？

【参考方案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);
);

【讨论】：

谢谢普里亚。该解决方案为 2 个样式标签提供了一个独特的 1 个 css 类。我想要的是每个独特的 x 样式标签的 x 独特的 css 类。但我想我可以用一点记事本++和excel来管理。

【参考方案2】：

如果你真的需要使用 simplehtmldom 来提取这个：

---

对于

<style>
...
</style>

使用：

$css = $html->find('style')->innertext;

---

对于

<div style="background:blue; color:white;"></div>

使用：

$css = $html->find('div[style]')->style;

---

如果有多个div 具有style 属性或多个<style>，您可以使用foreach 在它们之间循环。

---

解析样式：

在 PHP 中：

$s = 'background:blue; color:white;';

$results = [];
$styles = explode(';', $s);

foreach ($styles as $style) 
    $properties = explode(':', $style);
    if (2 === count($properties)) 
        $results[trim($properties[0])] = trim($properties[1]);
    


var_dump($results);

在 JS 中

let s = 'background:blue; color:white;';

let results = ;
let styles = s.split(";");

for (let style in styles) 
    let properties = styles[style].split(":");
  if (properties.length === 2) 
    results[properties[0].trim()] = properties[1].trim();
  


console.log(results);

https://jsfiddle.net/zyfhtwj2/