Clever Geek Handbook

Dynamically add a referenced style sheet to inline styles

Scenario

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.

Problem

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

Question

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.

+2


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

+1


source


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:

jQuery("[class]")
+1


source


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.

0


source






More articles:


All Articles