How can I access style properties on javascript objects which are using external style sheets?

css, html, javascript

Solution

You should use `window.getComputedStyle` to get that value. I would recommend against using `offsetWidth` or `clientWidth` if you're looking for the CSS value because those return a width which includes padding and other calculations.

Using `getComputedStyle`, your code would be:

var e = document.getElementById('0');
var w = document.defaultView.getComputedStyle(e,null).getPropertyValue("width");

The documentation for this is given at MDC : window.getComputedStyle

Problem

I have an external style sheet with this in it: ``` .box { padding-left:30px; background-color: #BBFF88; border-width: 0; overflow: hidden; width: 400px; height: 150px; } ``` I then have this: ``` <div id="0" class="box" style="position: absolute; top: 20px; left: 20px;"> ``` When I then try to access the width of the div: ``` alert(document.getElementById("0").style.width); ``` A blank alert box comes up. How can I access the width property which is defined in my style sheet? NOTE: The div displays with the correct width.

Original source