get value from css using document.getElementById().style.height javascript

Question

Please offer insight into this mystery.

I am trying to get the height value from a div box by

var high = document.getElementById("hintdiv").style.height; 
alert(high);

I can get this value just fine if the attribute is contained within the div tag, but it returns a blank value if the attribute is defined in the css section.

This is fine, it shows 100px as a value. The value can be accessed.

<div id="hintdiv" style="height:100px; display: none;">
.
.
var high = document.getElementById("hintdiv").style.height; 
    alert(high);

This is not fine, it shows an empty alert screen. The value is practically 0.

#hintdiv
{
height:100px
display: none; 
}

<div id="hintdiv">
.
.
var high = document.getElementById("hintdiv").style.height; 
    alert(high);

But I have no problem accessing/changing the "display:none" attribute whether it is in the tag or in the css section. The div box displays correctly by both attribute definition methods (inside the tag or in the css section).

I also tried to access the value by other variations, but no luck

document.getElementById("hintdiv").style.height.value  ----> undefined
document.getElementById("hintdiv").height ---->undefined
document.getElementById("hintdiv").height.value  ----> error, no execution

Any solution?

TIA.

See stackoverflow.com/questions/1098349/… and stackoverflow.com/questions/1048336/… — Crescent Fresh
– Crescent Fresh, Commented Jun 16, 2010 at 1:51
See also: gist.github.com/369133 and stackoverflow.com/questions/2531737/… — Christian C. Salvadó
– Christian C. Salvadó, Commented Jun 16, 2010 at 2:14
Thanks all, this was certainly unexpected. I guess I will do inline style for this 1(or 2 elements). — Jamex
– Jamex, Commented Jun 16, 2010 at 2:26

tereško · Accepted Answer · 2011-12-11 10:26:18Z

5

This is because, when you use document.getElementById("hintdiv").style.height; you are accessing the style attribute of the tag. If the attribute is not there , then you get no values.

Instead you should use currentStyle object in IE and getComputedStyle() function in the rest of web browsers.

answered Dec 11, 2011 at 10:26

tereško

58.5k26 gold badges100 silver badges151 bronze badges

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

Comments

Pierre · Accepted Answer · 2011-12-11 10:30:47Z

1

You CSS syntax is wrong, it sould be height:100px; rather than height:100px. Note the semicolon.

answered Dec 11, 2011 at 10:30

Pierre

19.1k5 gold badges44 silver badges63 bronze badges

Comments

Developer IT · Accepted Answer · 2010-06-16 02:10:27Z

-1

You should consider usign jQuery instead... it will simplify the thing as $('#hintDiv').height() and it will always return the actual width of the div.

answered Jun 16, 2010 at 2:10

Developer IT

1,2132 gold badges11 silver badges17 bronze badges

2 Comments

Jamex Over a year ago

Thanks DevIT, I need to pick up a jquery book.

Developer IT Over a year ago

Hi epascarello ! Glad I could help... but to leanr jQuery, you dont absolutly need a book, just try the tutorials on jQuery's website: docs.jquery.com/Tutorials

Collectives™ on Stack Overflow

get value from css using document.getElementById().style.height javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related