javascript - 将内联样式转换为 css 规则

标签 javascript php html css

<分区>

如果有一种方法可以将内联元素样式转换为 css 规则,我很感兴趣。我认为最难的部分是生成所需的 css 选择器。可能根本不可能,但可能有 js 或 php 的解决方案。谢谢。

例如,

<div class="red" style="color: #red"></div>
<div style="color: #yellow"></div>
<div id="white" style="color: #white"></div>

将被转换,假定类和 ids 为

<style>
    div{color: #yellow}
    .red{color: #red}
    #white{color: #white}
</style>

<div class="red"></div>
<div></div>
<div id="white"></div>

我的模板生成器需要这个,它首选样式不是内联的,而是在单独的文件或标签中,因此在编辑颜色、字体等时不会更改 block 的原始 html 代码。我认为,我解释清楚了,因为英语不是我的母语)

最佳答案

尝试 http://extractcss.com ,但正如@Tushar 指出的那样,黄色 div 不起作用。

尝试 https://github.com/jonkemp/extract-css看起来很有希望。

关于javascript - 将内联样式转换为 css 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32934342/

相关文章:

PHP 数组的平均时间

javascript - 如何一次选择两个元素并使我的代码使用 querySelector 影响它们?

带圆 Angular 的 HTML/CSS 表格,javascript-border 更改不起作用

javascript - 是否将我的代码包装在 promise 中

php - 从 php 运行 python 脚本并在 mysql 数据库中写入数据值

PHP 正则表达式替换相似字符串中某个字符的所有实例

javascript - 如何通过 URL 将参数传递给 GAE 上的 JavaScript 代码?

Javascript计算时间,包括过夜

javascript - 覆盖 Foundation 4 Joyride 的默认设置

javascript - 组件未定义//React和Webpack