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

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

例如

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

假设类别和ID转换为

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

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

我的模板生成器需要这个,它的样式不是内联的,而是放在单独的文件或标记中,因此在编辑颜色,字体等时,不会更改原始的HTML代码块.我想,我清楚地解释了,因为英语不是我的母语)

解决方法:

尝试http://extractcss.com,但正如@Tushar所指出的那样,黄色div无法正常工作.

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