For example, if I have CSS that included within document:
div {
color: red;
}
div.test {
border: 1px solid blue;
}
and html tag within document body:
<div id='demo'>
<div class='test'>123</div>
<div>456</div>
</div>
I want to convert everything within #demo as a string containing tag with all styles it was using, such as:
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>'
What I need is the content of convertExternalInternalStylesToInline function, that automatically fetch all descendant elements, apply the calculated/used styles then add css styles to those elements, then return it all as html string.
Can it be done using only client side javascript? If yes, how?
(I need to know how to get all calculated/used styles for a 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();
}
