动态地将引用的样式表添加到内联样式中
场景
我创建了一个页面，客户可以在其中构建自己的页面、日历、小部件、文章等。我创建了第二个动态构建器页面，他们可以在其中构建自己的新闻通讯。
问题
我所有的CSS都是通过类引用的，因为邮件程序非常有限，我必须内联添加所有样式。
问题
是否有一个脚本可以运行来通过类获取所有引用的样式，并将其添加到相关元素/标签内联样式中？
示例[简单]
<p class='txtBlack'>Hello World</p>
转换为
<p class='txtBlack' style='color:#000;'>Hello World</p>
希望这足够清楚地理解。
Scenario
I have created a page where the client can build their own page, calendars, widgets, articles etc. I have created a second Dynamic builder page where they can build their own newsletters.
Problem
All my css is referenced with classes, because mailers are very limited I have to add all styles inline.
Question
Is there a script I can run to grab all referenced styles via class, and add it to the relevant elements/tags inline-styles?
Example [simple]
<p class='txtBlack'>Hello World</p>
Converts to
<p class='txtBlack' style='color:#000;'>Hello World</p>
Hope this is clear enough to understand.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我会对每个元素使用
element.currentStyle和window.getComputedStyle()，然后“手动”读取我想要的内容并覆盖我确定不需要的内容在邮件应用程序中工作。我在这里做了一个例子： http://jsfiddle.net/Vmc7L/
另一种方法是从样式中读取规则工作表，然后将它们应用到内联样式。但是如果你有像
.myClass:firstChild>.anotherClass这样的选择器怎么办？ :D 也许 jquery 可以提供帮助。您需要一些方法： http://www.quirksmode.org/dom/w3c_css.html< /a>
I'd use
element.currentStyleandwindow.getComputedStyle()for each element, then 'manually' read what I want and overwrite what I'm sure that doesn't work in mail apps.I made example here: http://jsfiddle.net/Vmc7L/
Another way, is to read rules form style sheets and then apply them to inline style. But what if u got selectors like
.myClass:firstChild>.anotherClass? :D Maybe jquery can help.There're methods you need: http://www.quirksmode.org/dom/w3c_css.html
这个答案解释了如何：
我可以访问 invalid/ 的值吗来自 JavaScript 的自定义 CSS 属性？
CSSStyleDeclaration (https://developer.mozilla.org/en/DOM/CSSStyleDeclaration)
style:CSSStyleDeclaration 对象包含 cssText:
CSSStyleDeclaration 规范: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
要获取具有类名的所有元素，请使用：
This so answer explains how:
Can I access the value of invalid/custom CSS properties from JavaScript?
CSSStyleDeclaration (https://developer.mozilla.org/en/DOM/CSSStyleDeclaration)
style:CSSStyleDeclaration object contains cssText:
CSSStyleDeclaration specification: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
To get all elements with class names use:
这是解决方案，您可以使用“getElementsByClassName”javascript函数来收集具有指定类名的元素。但请记住，这在 IE 浏览器中不起作用。所以对于 IE 你必须有自己的函数。希望这对你有帮助。
Here is the solution u can use the "getElementsByClassName" javascript function to collect the elements with the class names specified. But remember this doesnot work IE browsers. So for IE u have to have your own function. Hope this helps u.