How to convert external / internal CSS styles to inline style attribute using client side javascript

Question

For example, if I have CSS that is included in the document:

div { color: red; } div.test { border: 1px solid blue; } 

and the html tag inside the document body:

 <div id='demo'> <div class='test'>123</div> <div>456</div> </div> 

I want to convert everything to #demo as a string containing a tag with all the styles that it used, for example:

 var parent = $('#demo'); var result = convertExternalInternalStylesToInline(parent); // the desired result: result = '<div style="color: red; border: 1px solid blue;">123</div>' + '<div style="color: red">456</div>' 

I need the contents of the function convertExternalInternalStylesToInline , which automatically extracts all descendant elements, applies the computed / used styles, then adds CSS styles for these elements, and then returns it all as an html string.

Is it possible to use only client side javascript ? If so, how?

(I need to know how to get all calculated / used styles for the tag)

minimal example:

 function convertExternalInternalStylesToInline(parent) { var parent = $(parent).clone(); // clone it before modify, is this deep clone? parent.find('*').each(function(idx,el){ // fetch all children var el = $(el); // convert to jquery object // get all applied styles on this element // el.? // --> don't know how // apply css for each styles el.css( css_prop, css_style ); }); // return as string, maybe: return parent.html(); } 

Answer 1

EDIT: Thanks to Winchestro, I looked at the window.getMatchedCSSRules function, which is actually only in Webkit, and there is a discussion that should be deprecated .

What you should use is actually window.getComputedStyle() Read documents in MDN .

Another useful resource you can explore is the CSSUtilities suite .

---

You need two separate things: a library to parse your Modal CSS object (CSSOM) and applying the appropriate CSS to your DOM elements.

I know a good nodejs library that does this Juice .

There is a library that I found that would probably work on an interface called inlineresources , which has an observable build

Secondly, I think you can use Juice with the browser for this ... But you will have to evaluate this feature manually ...

Answer 2

Edit: Thanks to Kumar, I realized that my proposed method is non-standard, and

 getComputedStyle( element ); 

Use instead

which is a little more difficult to use and filter, but has the advantage of giving you only the final rules that actually apply to the element after evaluating CSS (which also includes default values, not explicitly declared styles, which makes it more difficult to use in in this case).

---

 getMatchedCSSRules( element ); 

just use this javascript function. He does exactly what you want. I will explain this if there is anything to explain that is not implied by the name of the function.