javascript - Can jQuery get all CSS styles associated with an element?

ID : 10296

viewed : 20

Tags : javascriptjquerycssjavascript

Top 5 Answer for javascript - Can jQuery get all CSS styles associated with an element?

vote vote

93

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); 

:)

vote vote

84

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.

vote vote

75

Why not use .style of the DOM element? It's an object which contains members such as width and backgroundColor.

vote vote

64

I had tried many different solutions. This was the only one that worked for me in that it was able to pick up on styles applied at class level and at style as directly attributed on the element. So a font set at css file level and one as a style attribute; it returned the correct font.

It is simple! (Sorry, can't find where I originally found it)

//-- html object var element = htmlObject; //e.g document.getElementById //-- or jquery object var element = htmlObject[0]; //e.g $(selector)  var stylearray = document.defaultView.getComputedStyle(element, null); var font = stylearray["font-family"] 

Alternatively you can list all the style by cycling through the array

for (var key in stylearray) { console.log(key + ': ' + stylearray[key]; } 
vote vote

54

@marknadal's solution wasn't grabbing hyphenated properties for me (e.g. max-width), but changing the first for loop in css2json() made it work, and I suspect performs fewer iterations:

for (var i = 0; i < css.length; i += 1) {     s[css[i]] = css.getPropertyValue(css[i]); } 

Loops via length rather than in, retrieves via getPropertyValue() rather than toLowerCase().

Top 3 video Explaining javascript - Can jQuery get all CSS styles associated with an element?

Related QUESTION?