Reading CSS value using JavaScript

Question

This works:

Answer 1

Try to put your css in the head section of the page.

Answer 2

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.

Answer 3

Are you adverse to using jQuery?

http://api.jquery.com/width/

$(document).ready(function(){
    alert($("#hello").width());
});

Answer 4

jQuery will do it for you

$('#hello').mouseover(function({
  alert($(this).width()); 
});

Just try it!

Answer 5

Try the following

window.onload = function(){

var x = document.getElementById("hello");
var y ="";
if (x.currentStyle)
    y = x.currentStyle['width'];
else if (window.getComputedStyle)
    y = document.defaultView.getComputedStyle(x,null).getPropertyValue('width');
alert(y);



};

It was inspired from something I read Here

Answer 6

I don't think style.width is given a value unless you explicitly define it one. As others have said you can use currentStyle/getComputedStyle to get actual values of CSS items.

If you need JUST the width you can go with element.offsetWidth. If you need the value as a percent you'll have to compare the elements offsetWidth with the parents offsetWidth.