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