使用document.getElementById()。style.height javascript从css获取值

时间:2010-06-16 01:46:47

标签: javascript

请提供对这个谜团的见解。

我试图通过

从div框中获取高度值
var high = document.getElementById("hintdiv").style.height; 
alert(high);

如果属性包含在div标签中,我可以很好地获得此值,但如果在css部分中定义了属性,则返回空值。

这很好,它显示100px值。可以访问该值。

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

这不太好,它显示一个空的警报屏幕。该值几乎为0.

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

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

但是访问/更改“display:none”属性没有问题,无论是在标签中还是在css部分中。 div框可以通过两种属性定义方法(在标记内或在css部分中)正确显示。

我也尝试通过其他变体访问该值,但没有运气

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

任何解决方案?

TIA。

3 个答案:

答案 0 :(得分:5)

这是因为,当您使用document.getElementById("hintdiv").style.height;时,您正在访问代码的style属性。如果该属性不存在,那么您将得不到任何值。

相反,您应该在IE中使用currentStyle对象,在其余的Web浏览器中使用getComputedStyle()函数。

答案 1 :(得分:1)

您的CSS语法错误,它应该是height:100px;而不是height:100px。注意分号。

答案 2 :(得分:-1)

你应该考虑使用jQuery ......它会简化为$('#hintDiv')。height()并且它将始终返回div的实际宽度。