How to access css properties in javascript when applied via external CSS file?

15
votes

I have a little problem. When I set the css rule using some property, say, background-image in an external .css file and then try to access it using javascript in another external .js file, it does not work. That is to say I do not get any value for document.getElementById(someId).style.backgroundImage.

But when I set the css rule using style attribute in html file itself, it works.

So, my query is can't I access css property in js, if css is set in external .css file.

6
javascripthtmlcss
There is no difference between rules specified in the document and rules specified externally. Are you sure the external CSS file is being included correctly, and are you waiting until it's been loaded via onload? - meagar♦
Confirm that your document object is the same one, it is probably not. Are you running the commands in different windows / frames, perhaps? - NVRAM
Is your javascript running before the DOM is rendered (loaded directly via the HTML or include .js file), from an onload event, or later like on a button click? - NVRAM
yes, the external css file is loaded correctly and its being loaded normally not via onload. yes, the javascript is running before DOM is loaded. The js is called on events like onmouseover, onmouseout and onClick. - Rahul Utb
you may accept an answer if your problem is solved. - gblazex

6 Answers

22
votes

You can only access style properties in Javascript that have been set via Javascript (or the style attr).

To access the elements current style you should fetch the computed style of the element.

var el = document.getElementById('hello');
var comp = el.currentStyle || getComputedStyle(el, null);
alert( comp.backgroundColor );

Note, that the computed style may vary in browsers (like color being in hex or rgb) so you should normalize that if you want unified results.

2
votes

If you are trying to access a css property set in a stylesheet, rather than an inline style property, use document.defaultView.getComputedStyle (anything but IE below 9) or element.currentStyle in older IE's.

eg:

function deepCss (who, css){
    var dv, sty, val;
    if(who && who.style){
        css= css.toLowerCase();
        sty= css.replace(/\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        val= who.style[sty];
        if(!val){
            dv= document.defaultView || window;
            if(dv.getComputedStyle){
                val= dv.getComputedStyle(who,'').getPropertyValue(css);
            }
            else if(who.currentStyle){
                val= who.currentStyle[sty];
            }
        }
    }
    return val || '';
}

deepCss(document.body,'font-size')

1
votes

Are you trying to retrieve the property before it's actually rendered/the DOM is ready? Try doing it in the body's onload event, or if you're using jQuery, $(document).ready().

1
votes

the style property can be used to set styles and to retrieve inline style values, but it cannot retrieve style values set in an external style sheet. 

someElement = document.getElementById("element");
myStyles = document.defaultView.getComputedStyle(someElement,null);
backgroundImage = myStyles.getPropertyValue("background-image"); // w3c
backgroundImage = someElement.currentStyle["background-image"]; //IE
0
votes

You could use jquery to edit. Refer to http://api.jquery.com/css/

0
votes

This is the method to access external CSS Properties. You can try with this.

var x = document.getElementById('someId');

var getProperty = window.getComputedStyle('x');

var getImage = getProperty.getPropertyValue('background-image');