7

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.

3
  • just use jquery, api.jquery.com/css Commented Oct 25, 2011 at 19:27
  • actually the problem is, if <style> attribute is defined inside the document it just works easily. Now even with jQuery, i can set the value, or read inline values, not external css values... I just somehow want to read the properties of external css file which is applied on some element in document Commented Oct 25, 2011 at 19:39
  • possible duplicate of How do you read CSS rule values with JavaScript? Commented Apr 30, 2014 at 17:55

1 Answer 1

11

You have got two options:

  1. Manually enumerating and parsing the document.styleSheets object (not recommended, unless you want to get all specific style properties defined by a certain selector).
  2. 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;
}
Sign up to request clarification or add additional context in comments.

6 Comments

thank you so much, it works in firefox, but somehow i get null when using chrome, is there something missing for chrome?
I'm surprised that the function worked in FireFox, because my function contained a typo. It's fixed now. Fiddle: jsfiddle.net/kDNFz
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 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" jsfiddle.net/QFfLB
Will this also serve as an answer to this older question?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.