height,clientHeight,scrollHeight,offsetheight测试小结

时间：2011-03-25 来源：潜水鱼

测试代码(替换属性测试)
<body style="border:1px solid red; width:800px">
    <form id="form1" runat="server">
    <div style="border:1px solid red; width:500px; margin-top:50px; overflow:scroll;" id="test"
           onclick="justAtest()">
    <div style=" float:left; width:220px; overflow:scroll;border:1px solid red " id="test2">
    <div style="" id="test4"></div>
    </div>
    <div style=" 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
结果一致，为自身高度加自身边框

截图