Get all css styles for a DOM element (a la Firebug)

Question

For a DOM element, how to I get all styles specified in css for a particular element? Is it a case of iterating over all css style names?

Or is there a more elegant way? How does Firebug do it?

Thanks

Answer 1

You should be able to get it with getComputedStyle:

var css = window.getComputedStyle(element);
for (var i=0; i<css.length; i++) {
    console.log(css[i] +'='+css.getPropertyValue(""+css[i]))
}

However, this method returns computed style meaning that it will perform some computation and convert your values in px. For example if you have a line-height of 1.2 then it will be returned as 57.6px instead of 1.2

Answer 2

Preveous solutions mangle the styles as they are modified before expanded. Also you get a lot of default styles.

my solution strips the default styles and keeps the cascading styles through the elements.

Run in console and copy the element you want from the Elements view. (tested in chrome)

function setStyle(theElement) {
    var els = theElement.children;
    for(var i = 0, maxi = els.length; i < maxi; i++)
    {
        setStyle(els[i]);

        var defaultElem = document.createElement(els[i].nodeName)
        var child = document.body.appendChild(defaultElem);
        var defaultsStyles = window.getComputedStyle(defaultElem,null);     

        var computed = window.getComputedStyle(els[i],null).cssText;

        for(var j = 0, maxj = defaultsStyles.length; j < maxj; j++)
        {
            var defaultStyle = defaultsStyles[j] + ": " + defaultsStyles.getPropertyValue(""+defaultsStyles[j]) + ";"
            if(computed.startsWith(defaultStyle)) {
                computed = computed.substring(defaultStyle.length);
            } else {
                computed = computed.replace(" " + defaultStyle, "");
            }
        }

        child.remove();

        els[i].setAttribute("style", computed);
    }
}

setStyle(document.getElementsByTagName("body")[0]);

console.log("DONE");

Answer 3

You can iterate through all of the CSS styles for an element like this:

var myElement = document.getElementById('someId');
var myElementStyle = myElement.style;

for(var i in myElementStyle){
    // if it's not a number-index, print it out.
    if(/^[\d]+/.exec(i) == null){
        console.log("Style %s = %s", i, myElementStyle[i]);
        /*
         * Do other stuff here...
         */
    }
}

Answer 4

For a DOM element, how to I get all styles specified in css for a particular element? Is it a case of iterating over all css style names?

Yes, it is.

Or is there a more elegant way?

I don't know about more elegant (elegance is pretty high on the subjective scale), but it would certainly be shorter and sweeter if you made use of a library such as jQuery, here's a solution someone coded to answer another question:

How Can I Get List Of All Element CSS Attributes with jQuery?

How does Firebug do it?

I have no idea.