1

The following code pulls HTML from a table and injects the contents into HTML email.

var content = $j('#product_comparison').html();

The problem with this approach is that the HTML email loses its styling because the original table references an external stylesheet and my understanding of HTML email is that all styles should be inline and not referenced externally or within a <style> tag.

Are there any Javascript / jQuery methods that can create the HTML with inline styles included so the result would appear correctly in a HTML email message?

user1990366
  • 64
  • 2
  • 7
  • What does the HTML look like? And styles are not referenced by a ` – putvande Jul 30 '13 at 10:42
  • Apologies, I meant ` – user1990366 Jul 30 '13 at 10:51
  • The `` itself is quite complicated, with `odd` and `even` classes on the ``, background colours and various styles
     – user1990366 Jul 30 '13 at 10:54
  • There are known solution to normally retrieve all the CSS applied to an element. See the stackoverflow topic here: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element. Then you could add it to your email with inline CSS in the forwarded HTML for ex. – Ricola3D Jul 30 '13 at 10:57

2 Answers2

0

Well, if you want a crude but quick way of achieving this, you can do as follows to set the style attribute of one specific element to all its computed style:

$('#my-div').css(window.getComputedStyle(document.getElementById('my-div')));

Although this will give you all style properties for that item.

Of course, you cannot simply use the .html() method for this, you'll need to clone each element individually.

http://jsfiddle.net/QfN6N/1/

Christoffer Mansfield
  • 793
  • 4
  • 11
0

Once you've got the HTML out, paste into the tool linked to below, preceded by a <link> to the CSS file and it will inline all the relevant CSS automatically.

MailChimp CSS Inliner

Hope this helps.

David Goss
  • 677
  • 4
  • 8