javascript - 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