jQuery convert applied classes to style attributes

Question

I am working on a bookmarklet project. So when user clicks on bookmarklet he can grab partial part of a web page and view it somewhere else.

The problem is that partial element (lets assume div) has css styles and classes applied.

Is there any way to loop through all child elements of selected div and convert class properties to style properties so I can keep formatting?

For example below a sample screenshot; I need to take out all applied classes and convert them into style attributes in selected area.

Answer 1

(function($) {
    $.extend($.fn, {
        makeCssInline: function() {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) { 
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }
                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));

You would call it using

$(".select").makeCSSInline();

The problem with this function is that it brings every CSS property into the tag, so it can cause a major performance hit, but if you are willing to take that risk, go ahead

Fiddle

_{Function acquired from here}