Look mom no jQuery !!! Getting all CSS properties of a DOM element in pure JavaScript

Getting and setting CSS properties is a simple task. We can make it in pure JavaScript:

var color = domElem.style.color;    // Get color
domElem.style.color='blue';    // Set new color

Using jQuery it can be done with the $.css() method:

var color = $(domElem).css('color');    // Get color
$(domElem).css('color', 'blue');    // Set new color

The recent jQuery++ project claims to have a $.styles() method fastest than $.css() one.

The issue is: How to get all the styles of a given DOM element? Not only those applied directly with the style attribute but those applied using CSS classes.

The solution

Next code retrieves an object with all the style properties of a given DOM element, no matter if they were specified in CSS classes or withint the style attribute of the element.

The idea behind the code is simply: we invoke the browser function that computes the whole element’s style or, if it is not possible, retrieves the CSS properties from the style attribute.

    function getComputedStyle( dom ) {
        var style;
        var returns = {};
        // FireFox and Chrome way
        if(window.getComputedStyle){
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var val = style.getPropertyValue(prop);
                returns[prop] = val;
            }
            return returns;
        }
        // IE and Opera way
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        // Style from style attribute
        if(style = dom.style){
            for(var prop in style){
                if(typeof style[prop] != 'function'){
                    returns[prop] = style[prop];
                }
            }
            return returns;
        }
        return returns;
    };

The code works (or must work) on any browser. For FireFox and Chrome browser the right way to get the computed style is through the window.getComputedStyle() method, while on IE and Opera browsers the dom.currentStyle property is the right place.

Related Posts:

2 thoughts on “Look mom no jQuery !!! Getting all CSS properties of a DOM element in pure JavaScript”

  1. Poked at the code with JSLint and reached a version that we both were happy with:

    /*jslint plusplus: true, white: true, browser: true */
    var getComputedStyle = function(dom){"use strict";
            var style,i,l,prop,ret={};
            if(window.getComputedStyle){     // FireFox and Chrome way
                style = window.getComputedStyle(dom, null);
                for(i = 0, l = style.length; i < l; ++i){
                    prop = style[i];
                    ret[prop] = style.getPropertyValue(prop);
                }
            } else if(dom.currentStyle){     // IE and Opera way
                style = dom.currentStyle;
                for(prop in style){
                    if(style.hasOwnProperty(prop)){
                        ret[prop] = style[prop];
                    }
                }
            } else if(dom.style){            // Style from style attribute
                style = dom.style;
                for(prop in style){
                    if(style.hasOwnProperty(prop)){
                        if(typeof style[prop] !== 'function'){
                            ret[prop] = style[prop];
                        }
                    }
                }
            }                               // else no joy, return empty
            return ret;
        };
    
  2. Well, it’s a very nice approach. I liked it very much. Just one thing I would like to point out:
    As you are reading the computed style first, and then the attribute style. So, my point is, in computed style the styles from attribute styles come itself, then no need to do it again.

    And if not coming from attribute style in computed style, then you should not put a return in the first 2 loops, so that your compiler comes the end and reads the style attribute also.

    Otherwise, its very nice. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>