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

admin管理员组

文章数量:1341397

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.

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.

• javascript

Share Improve this question Follow asked Jun 16, 2010 at 1:46 JamexJamex 74233 gold badges99 silver badges1717 bronze badges 3

• 4 See stackoverflow./questions/1098349/… and stackoverflow./questions/1048336/… – Crescent Fresh Commented Jun 16, 2010 at 1:51
• See also: gist.github./369133 and stackoverflow./questions/2531737/… – 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 Commented Jun 16, 2010 at 2:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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.

本文标签： get value from css using documentgetElementById()styleheight javascriptStack Overflow