如何将 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>

注意：这个问题不是重复的，因为我的代码中没有样式标签。我已经搜索了其他答案，但他们 ZURB 链接现已关闭 http://zurb.com/ink/inliner.php 这里你需要样式标签： JavaScript Regex 从样式 HTML 标签中提取文本，也在这里： 将 css 从 html 样式标签转换为内联 css

Answer 1

方法 1： extractCSS - Online CSS Extractor

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

Answer 2

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

<小时 />

为

<style>
...
</style>

用：

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

<小时 />

为

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

用：

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

---

如果有多个divstyle或多个<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/