Can jQuery get all CSS styles associated with an element?

Question

Is there a way in jQuery to get all CSS from an existing element and apply it to another without listing them all?

I know it would work if they were a style attribute with attr(), but all of my styles are in an external style sheet.

Answer 1

A couple years late, but here is a solution that retrieves both inline styling and external styling:

function css(a) {     var sheets = document.styleSheets, o = {};     for (var i in sheets) {         var rules = sheets[i].rules || sheets[i].cssRules;         for (var r in rules) {             if (a.is(rules[r].selectorText)) {                 o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));             }         }     }     return o; }  function css2json(css) {     var s = {};     if (!css) return s;     if (css instanceof CSSStyleDeclaration) {         for (var i in css) {             if ((css[i]).toLowerCase) {                 s[(css[i]).toLowerCase()] = (css[css[i]]);             }         }     } else if (typeof css == "string") {         css = css.split("; ");         for (var i in css) {             var l = css[i].split(": ");             s[l[0].toLowerCase()] = (l[1]);         }     }     return s; } 

Pass a jQuery object into css() and it will return an object, which you can then plug back into jQuery's $().css(), ex:

var style = css($("#elementToGetAllCSS")); $("#elementToPutStyleInto").css(style); 

:)

Answer 2

Two years late, but I have the solution you're looking for. Not intending to take credit form the original author, here's a plugin which I found works exceptionally well for what you need, but gets all possible styles in all browsers, even IE.

Warning: This code generates a lot of output, and should be used sparingly. It not only copies all standard CSS properties, but also all vendor CSS properties for that browser.

jquery.getStyleObject.js:

/*  * getStyleObject Plugin for jQuery JavaScript Library  * From: http://upshots.org/?p=112  */  (function($){     $.fn.getStyleObject = function(){         var dom = this.get(0);         var style;         var returns = {};         if(window.getComputedStyle){             var camelize = function(a,b){                 return b.toUpperCase();             };             style = window.getComputedStyle(dom, null);             for(var i = 0, l = style.length; i < l; i++){                 var prop = style[i];                 var camel = prop.replace(/\-([a-z])/g, camelize);                 var val = style.getPropertyValue(prop);                 returns[camel] = val;             };             return returns;         };         if(style = dom.currentStyle){             for(var prop in style){                 returns[prop] = style[prop];             };             return returns;         };         return this.css();     } })(jQuery); 

Basic usage is pretty simple, but he's written a function for that as well:

$.fn.copyCSS = function(source){   var styles = $(source).getStyleObject();   this.css(styles); } 

Hope that helps.