Dynamically add a referenced style sheet to inline styles


I have created a page where the client can create their own page, calendars, widgets, articles, etc. I created a second page of a dynamic builder where they can create their own newsletters.


All my css are referencing classes because mailers are very limited. I have to add all inline styles .


Is there a script I can run to grab all the referenced styles through the class and add it to the appropriate in-style / tags?

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.


source to share

3 answers

I would use element.currentStyle

and window.getComputedStyle()

for each item, then "manually" read what I want and overwrite what I'm sure doesn't work in mail applications.

I've provided an example here: http://jsfiddle.net/Vmc7L/

Another way is to read the rule style sheets and then apply them to the inline style. But what if you have type selectors .myClass:firstChild>.anotherClass

?: D Maybe jquery can help.

The methods you need are: http://www.quirksmode.org/dom/w3c_css.html



This is so the answer explains how: Can I access the value of invalid / custom CSS properties from JavaScript?

CSSStyleDeclaration ( https://developer.mozilla.org/en/DOM/CSSStyleDeclaration )

div {
    width: 100px;


style: CSSStyleDeclaration object contains cssText:

cssText: "width: 100px"


CSSStyleDeclaration specification: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

To get all elements with class names use:





Here is a solution u can use javascript function "getElementsByClassName" to collect elements with specified class names. But remember that this does not work for IE browsers. So for IE, you must have your own function. Hope this helps you.



All Articles