Dynamically Add Referenced Stylesheet To Inline Styles

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

Solution 1:

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

Solution 2:

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]")

Solution 3:

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.