How to convert a HTMLElement to a string putting all css in style tag using jQuery

Question

Is it possible to convert a HTMLElement to a string putting all css styles (including the ones created dynamically with javascript) in style tags?

Answer 1

You can get this by accessing the outerHTML property

$("your element selector").prop("outerHTML");

This will return a string value of the object with any inline styling included.

This won't include styling included in separate css files. If this is something you do need then I would recommend looking at this and this previous question.

Answer 2

Getting the styles is not really an options there are css rules, inline styles and user agent styles that affects the actual look too.

You can always use jQuery css() method to get the calculated values of an element: ref css()

$(ele).css('height'); //Most of common properties are supported

But that will not do the work you are after.

I will save it as an image using rasterizeHTML.js and I need element looks exactly as in browser.

If that is your goal I can suggest you use other methods and libraries that already does a good job: html2canvas

in html2canvas the results are pretty accurate and the major limit is with images - but there are several methods to overcome that such as using the images as backgrounds.

Hope I helped.