2

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.

Marc Uberstein
  • 12,501
  • 3
  • 44
  • 72
  • Mail applications especially Outlook are very limited. I guess your mail results won't look like your web page. – jantimon Aug 24 '11 at 07:53
  • Yes, that's correct, like I said. But to have everything inline styled, and converted tables...it will have a very close comparison. :) – Marc Uberstein Aug 24 '11 at 07:58

3 Answers3

1

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]")
Community
  • 1
  • 1
jantimon
  • 36,840
  • 23
  • 122
  • 185
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

RobertO
  • 2,655
  • 1
  • 20
  • 18
  • Thanks for the answer. Looks great and works in IE. How can I implement this using jQuery selectors? – Marc Uberstein Aug 24 '11 at 11:04
  • 1
    Well, first way is to get every element on page, read its current style, then save it to `style` attribute. Second way is to read every css rule from style sheets, find element that match its selector, then apply css to them. jquery helps alot to find element by selector, I made example: http://jsfiddle.net/w4fUE/ – RobertO Aug 26 '11 at 10:21
0

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.

AmGates
  • 2,127
  • 16
  • 29