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.

enter image description here

So you want to pull the styles from the classes and apply them as inline styling? — Cody Guldner, Jul 31 '13 at 19:19
If you open the “Computed Style” panel, you can see all styles of the selected element. You could, with JavaScript, iterate through every computed style (whether set by a class or by the browser) on every element and save all of the styles. Here’s [how to get computed styles](http://stackoverflow.com/q/1004475/578288) in JavaScript. — Rory O'Kane, Jul 31 '13 at 19:20
And you think jQuery is not "doing it programatically"? A magic trick or something? — MightyPork, Jul 31 '13 at 19:23
@CodyGuldner I would mark as an answer of your solution. Thanks for the trick! — Teoman shipahi, Jul 31 '13 at 19:29

score 6 · Accepted Answer · edited May 23 '17 at 12:17

(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}

Very good solution, nasty but gets the job done. As implied in your statement, this should be a last resort and comes with the "Surgeon Generals Warning": `Your users may experience lag, performance, or health concerns with repeated use of this solution` — GoldBishop, Mar 28 '17 at 17:03

Ariel Bottero · Answer 2 · 2019-01-23T19:23:35.383

Fixed to use with bootstrap

(function($) {
    $.extend($.fn, {
        makeCssInline: : function(sizes) {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) {
                    if(property=="height" || property=="width") { continue; }
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }

                if(sizes) {
                    properties.push("width" + ':' + $(this).width()+"px");
                    properties.push("height" + ':' + $(this).height()+"px");
                }

                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));

jQuery convert applied classes to style attributes

2 Answers2