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 http://stackoverflow.com/questions/1098349/reading-non-inline-css-style-info-from-javascript — Alexander Pavlov, Mar 06 '12 at 15:32
possible duplicate of [Read CSS property of an element using JavaScript](http://stackoverflow.com/questions/7894577/read-css-property-of-an-element-using-javascript) — Blazemonger, Apr 30 '14 at 17:51

score 2 · Answer 1 · answered Mar 06 '12 at 15:40

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 06 '12 at 15:40

Clyde Lobo

9,126
7
34
61

Thanks but this will not work on IE I think. I used jQuery to sort out the cross-browser issue in the end. – Gapton Mar 07 '12 at 03:16
I have tested it in IE 8 and it works. Glad you found a solution using jQuery. – Clyde Lobo Mar 07 '12 at 08:42

score 1 · Answer 2 · answered Mar 06 '12 at 15:30

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.

score 1 · Accepted Answer · answered Mar 06 '12 at 15:32

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 06 '12 at 15:32

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. – Gapton Mar 07 '12 at 03:14
*"...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. – T.J. Crowder May 04 '17 at 22:07

score 0 · Answer 4 · answered Mar 06 '12 at 15:30

0

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

answered Mar 06 '12 at 15:30

ihorko

6,855
25
77
116

if you have read my post you would know that is something i have already tried. and no it doesn't work. – Gapton Mar 06 '12 at 15:57

score 0 · Answer 5 · answered Mar 06 '12 at 15:31

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.

score 0 · Answer 6 · answered Mar 06 '12 at 15:33

0

jQuery will do it for you

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

Just try it!

answered Mar 06 '12 at 15:33

Jannis M

745
1
4
15

score 0 · Answer 7 · answered Mar 06 '12 at 15:33

0

Are you adverse to using jQuery?

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

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

answered Mar 06 '12 at 15:33

tedski

2,271
3
27
48

Reading CSS value using JavaScript

7 Answers7

Linked

Related