Read CSS property of an element using JavaScript

Question

So if there is a css file linked to a webpage like:

<link href="style.css" rel="stylesheet" type="text/css">

and i want to read a certain property, e.g a div has className='layout' and i want to read the details of this property using JavaScript, how can i do that?

I have searched a lot but almost have no luck, please suggest.

possible duplicate of [How do you read CSS rule values with JavaScript?](http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript) — Blazemonger, Apr 30 '14 at 17:55

Rob W · Accepted Answer · 2011-10-25T20:10:11.180

11

You have got two options:

Manually enumerating and parsing the document.styleSheets object (not recommended, unless you want to get all specific style properties defined by a certain selector).
Create an element matching the selector, and use the getComputedStyle or currentStyle (IE) method to get the property value.

In your example, attempt to get a certain property (let's say: color) of a div with class="layout":

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}

Regarding comment at your question, another function:
The function below will ignore inline style definitions of the current element. If you want to know the style definitions inherited from a stylesheet (without inherited style definitions of the parent elements), traverse the tree, and temporary wipe the .cssText property, as shown in the funcion below:

function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}

edited Oct 25 '11 at 20:10

answered Oct 25 '11 at 19:41

Rob W

341,306
83
791
678

thank you so much, it works in firefox, but somehow i get null when using chrome, is there something missing for chrome? – Johnydep Oct 25 '11 at 20:03
I'm surprised that the function worked in FireFox, because my function contained a typo. It's fixed now. Fiddle: http://jsfiddle.net/kDNFz/ – Rob W Oct 25 '11 at 20:11
actually i corrected it while testing, so yes it worked, but i can't seem to have the same result in chrome, it's a big problem. – Johnydep Oct 27 '11 at 02:58
@Johnydep Chrome seems not to apply style attributes until the element is rendered by adding it to the document tree. I have successfully tested the function by adding two lines, **see" http://jsfiddle.net/QFfLB/** – Rob W Oct 27 '11 at 08:11
Will this also serve as an answer to [this older question](http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript)? – Blazemonger Apr 30 '14 at 17:58
@Blazemonger The questions are a bit different. The "[older question](http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript)" requests access to all CSS properties that matches a given *selector* (could be more than one), while this question specifically asks for one specific CSS property for a given element. – Rob W Apr 30 '14 at 18:07

Read CSS property of an element using JavaScript

1 Answers1

Linked