Question

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.

Answer 1

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