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

Question

请深入了解这个谜团.

我试图从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.

Answer 1

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

相反,您应该currentStyle在IE中使用对象并getComputedStyle()在其余的Web浏览器中运行.

Answer 2

你应该考虑使用 jQuery 来代替......它将把事情简化为 $('#hintDiv').height() 并且它总是返回 div 的实际宽度。