height,clientHeight,scrollHeight,offsetheight测试小结
测试代码(替换属性测试)
<body style="border:1px solid red; height:1000px; width:800px">
<form id="form1" runat="server">
<div style="border:1px solid red; height:500px; width:500px; margin-top:50px; overflow:scroll;" id="test"
onclick="justAtest()">
<div style="height:600px; float:left; width:220px; overflow:scroll;border:1px solid red " id="test2">
<div style="height:700px;" id="test4"></div>
</div>
<div style="height:550px; float:left; width:250px; border:1px solid red" id="test3"></div>
</div>
</form>
</body>
function justAtest()
{
var test= document.getElementById("test");
var test2=document.getElementById("test2")
var test3=document.getElementById("test3")
var test4=document.getElementById("test4");
alert(test4.style.height);
alert(test3.style.height);
alert(test2.style.height)
alert(test.style.height);
alert(document.body.style.height)
}
结果
Height
结果一致，为style中设置值
clientHeight
结果一致，为700,550,587,487,1000，为可视（有效）内容区的高度，即减去滚动条的宽度，约13px
scrollHeight
IE下结果为：700，550，700，602，1000，为最高子容器高度加其边框。
火狐下结果为：700，552，700，602，1002，当不包含子容器时为自身高度加边框，当包含子容器时为最高子容器高度加其边框并忽略自身边框，和IE一样
offsetHeight
结果一致，为自身高度加自身边框
截图
