CODEWITHSUNDEEP
javascriptcssdom
Richard H
Richard H

Reputation: 39135

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

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

Upvotes: 14

Views: 19633

Answers (4)

Stephan T.
Stephan T.

Reputation: 31

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

Upvotes: 3

NoBugs
NoBugs

Reputation: 9492

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

Upvotes: 25

JasonWyatt
JasonWyatt

Reputation: 5303

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...
         */
    }
}

Upvotes: 0

karim79
karim79

Reputation: 342755

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.

Upvotes: -3

Related Questions