Dynamically add referenced stylesheet to inline styles

Scenario

I have cre开发者_JS百科ated 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.

I'd use element.currentStyle and window.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

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)

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:

jQuery("[class]")

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.