Reading CSS value using JavaScript

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%"

Possible duplicate of stackoverflow.com/questions/1098349/… — Alexander Pavlov
– Alexander Pavlov, Commented Mar 6, 2012 at 15:32
possible duplicate of Read CSS property of an element using JavaScript — Blazemonger
– Blazemonger, Commented Apr 30, 2014 at 17:51

Clyde Lobo · Accepted Answer · 2012-03-06 15:40:09Z

2

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

answered Mar 6, 2012 at 15:40

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gapton Over a year ago

Thanks but this will not work on IE I think. I used jQuery to sort out the cross-browser issue in the end.

Clyde Lobo Over a year ago

I have tested it in IE 8 and it works. Glad you found a solution using jQuery.

user1252065 · Accepted Answer · 2012-03-06 15:32:57Z

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.

answered Mar 6, 2012 at 15:32

user1252065

2 Comments

Gapton Over a year ago

Thanks that was informative. I wasn't aware of getComputedStyle and the associated cross-browser problem. Will keep this in mind as a web dev from now on. I chose to use jQuery to overcome this in the end.

T.J. Crowder Over a year ago

"...that have not been set using Javascript." That's incorrect. It's not that they've been set by JavaScript; it's that they're directly applied to the element. That could be via JavaScript, or via the style attribute in markup.

Pointy · Accepted Answer · 2012-03-06 15:30:24Z

1

In InternetExplorer you can use .currentStyle instead of .style. In other browsers, you can use the getComputedStyle mechanism.

var yourElement = document.getElementById('whatever');
var theStyle = window.getComputedStyle(yourElement);

You can then call .getPropertyValue() on the returned style object to find the CSS properties you're interested in.

answered Mar 6, 2012 at 15:30

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

ihorko · Accepted Answer · 2012-03-06 15:30:43Z

0

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

answered Mar 6, 2012 at 15:30

ihorko

6,95526 gold badges81 silver badges123 bronze badges

1 Comment

Gapton Over a year ago

if you have read my post you would know that is something i have already tried. and no it doesn't work.

Snuffleupagus · Accepted Answer · 2012-03-06 15:31:16Z

0

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.

answered Mar 6, 2012 at 15:31

Snuffleupagus

6,8053 gold badges28 silver badges36 bronze badges

Comments

Jannis M · Accepted Answer · 2012-03-06 15:33:27Z

0

jQuery will do it for you

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

Just try it!

answered Mar 6, 2012 at 15:33

Jannis M

7351 gold badge4 silver badges15 bronze badges

Comments

tedski · Accepted Answer · 2012-03-06 15:33:42Z

0

Are you adverse to using jQuery?

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

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

answered Mar 6, 2012 at 15:33

tedski

2,2863 gold badges27 silver badges48 bronze badges

Collectives™ on Stack Overflow

Reading CSS value using JavaScript

7 Answers 7

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related