Question

This works:

<div id="hello" style="width:100%;"></div>
<script>
window.onload = function(){

alert(document.getElementById("hello").style.width);

};
</script>

This does not work:

<div id="hello"></div>
<style>
div#hello{
  width:100%;
}
</style>
<script>
window.onload = function(){

alert(document.getElementById("hello").style.width);

};
</script>

• I have also tried properly putting the css style definition in the head tag, didn’t work
• I have tried defining a javascript function instead of calling on window.onload , didn’t work

strangest thing is, if I set the width using javascript:

alert( document.getElementById("hello").style.width );
document.getElementById("hello").style.width = "25%";
alert(document.getElementById("hello").style.width );

It would work. The first alert would show a blank alert, then the second alert will show “25%”

Answer 1

You cannot access CSS properties that way that have not been set using Javascript. You need to use getComputedStyle, see https://developer.mozilla.org/en/DOM/window.getComputedStyle
On MSIE this works differently.