将引用的样式表动态添加到内联样式答案

【问题标题】：Dynamically add referenced stylesheet to inline styles将引用的样式表动态添加到内联样式
【发布时间】：2011-08-24 17:21:32
【问题描述】：

场景

我创建了一个页面，客户可以在其中构建自己的页面、日历、小部件、文章等。我创建了第二个动态构建器页面，客户可以在其中构建自己的时事通讯。

问题

我所有的 css 都被类引用，因为邮件非常有限，我必须添加所有样式 inline。

问题

我可以运行一个脚本来通过类获取所有引用的样式，并将其添加到相关的元素/标签内联样式中吗？

示例[简单]

<p class='txtBlack'>Hello World</p>

转换为

<p class='txtBlack' style='color:#000;'>Hello World</p>

希望这足够清楚，可以理解。

【问题讨论】：

【解决方案1】：

我会为每个元素使用element.currentStyle 和window.getComputedStyle()，然后“手动”读取我想要的内容并覆盖我确定在邮件应用程序中不起作用的内容。

我在这里做了例子：http://jsfiddle.net/Vmc7L/

另一种方法是从样式表中读取规则，然后将它们应用于内联样式。但是如果你有像.myClass:firstChild>.anotherClass 这样的选择器呢？ :D 也许 jquery 可以提供帮助。

【讨论】：

感谢您的回答。看起来很棒，可以在 IE 中使用。如何使用 jQuery 选择器实现这一点？
嗯，第一种方法是获取页面上的每个元素，读取其当前样式，然后将其保存到style 属性。第二种方法是从样式表中读取每个 css 规则，找到与其选择器匹配的元素，然后将 css 应用于它们。 jquery 对通过选择器查找元素有很大帮助，我举了一个例子：jsfiddle.net/w4fUE

【解决方案2】：

div {
    width: 100px;
}

style:CSSStyleDeclaration 对象包含 cssText:

cssText: "width: 100px"

要获取所有具有类名的元素，请使用：

jQuery("[class]")

【讨论】：

【解决方案3】：

这是您可以使用“getElementsByClassName”javascript 函数来收集具有指定类名的元素的解决方案。但请记住，这不适用于 IE 浏览器。所以对于 IE 你必须有自己的功能。希望这对你有帮助。

【讨论】：