offsetHeight和clientHeight之间 的区别

  offsetLeft html 元素相对于自己的 offsetParent 元素的左位置,还有一个 offsetTop.

clientHeigh 内容可视区域的高度, 也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE
Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS
FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight





offsetHeight和clientHeight之间区别的实例
<input type="checkbox" id="increaseBorder">累减DIV popo的边框宽度(不勾选为累加)<br>
<input type="checkbox" id="increaseDIV">累减DIV popo的高度(不勾选为累加)<br>
<input type="checkbox" id="increasePadding">累减DIV popo的内距(不勾选为累加)<br>
<input type="checkbox" id="scrollbarDisplay" onclick="popo.style.overflow=(popo.style.overflow=='scroll')?('hidden'):('scroll')">隐藏DIV popo的滚动条(不勾选为显示)<br>
<button onclick="(increaseBorder.checked)?((eval(popo.style.borderWidth.split('p')[0])>0)?(plus=-1):(plus=0)):(plus=1);popo.style.borderWidth=eval(popo.style.borderWidth.split('p')[0])+plus;popo.style.borderStyle='solid';popo.style.borderColor='red'">改变DIV边框宽度,改变clientHeight</button><br>
<button onclick="(increaseDIV.checked)?((eval(popo.style.height.split('p')[0])>0)?(plus2=-1):(plus2=0)):(plus2=1);popo.style.height=eval(popo.style.height.split('p')[0])+plus2;">改变DIV高度,改变offsetHeight</button><br>
<button onclick="(increasePadding.checked)?((eval(popo.style.paddingTop.split('p')[0])>0)?(plus3=-1):(plus3=0)):(plus3=1);popo.style.paddingTop=eval(popo.style.paddingTop.split('p')[0])+plus3;">改变DIV内距,改变scrollHeight</button><br>
<button onclick="alert(popo.clientHeight)">查看DIV popo的clientHeight</button><br>
<button onclick="alert(popo.offsetHeight)">查看DIV popo的offsetHeight</button><br>
<button onclick="alert(popo.scrollHeight)">查看DIV popo的scrollHeight</button><br>
<button onclick="alert(popo.clientTop)">查看DIV popo的clientTop</button><br>
<button onclick="alert(popo.offsetTop)">查看DIV popo的offsetTop</button><br>
<button onclick="alert(popo.scrollTop)">查看DIV popo的scrollTop</button>
<br>
<br>
<div id="popo" style="overflow:scroll;width:400; height:300;border:0px;padding-top:0px">“天下没有免费的午餐”这句至理名言再次被毫不留情地印证, www.myibf.com宣称已无力支持高昂的维护费用,将不再提供免费的论坛存放,将于2002年10月20日删除所有免费论坛的数据库资料,并不予备份。这个火热的夏天火热的myibf论坛到此结束,曾经在经典论坛myibf论坛联盟中充当myibf免费论坛技术支持的 <A HREF=" http://popoever.myibf.com" TARGET=_blank>http://popoever.myibf.com</A> 也将在数天后关门大吉。为此,POPO只好另起炉灶,暂时搞个ASP的论坛顶一下:<br>
<A HREF=" http://www.w619.com/bbs/default.asp" TARGET=_blank>http://www.w619.com/bbs/default.asp</A>
<br>
幸亏偶在公司的空间上还留了点ASP空间,呵呵,总算还能发挥一下作用。谢谢lnman老弟提供Snitz Forum 3.0 Final的WindStudio版源码,话说回来,偶曾经给用户做的网站中用的最多的也就是这个论坛了,记得原来用的是Snitz Forums 2000 v3.4的,不过目前这个WindStudio的简化版真的是很清爽,简单好用,呵呵,临时过渡还能要求什么呢~~~<br>
昨天在经典上又看到cwd.dk网站也要转让的消息,哎,现如今免费真是不好搞啊,真不知道那个 www.myikonboard.com能坚持到几时,免费的东西带给我们的兴奋如同他带给我们的遗憾和失望一般,让我们一起缅怀这些幕后英雄~~~<br>
POPO打算不让自己娴熟的英语荒废掉,准备给myibf的support写个mail,看能不能把自己的数据库挖回来,不过凶多吉少,呵呵,有时候人没得选择的......<br>
<br>
仅以此日记纪念myibf.com免费论坛的美好韶光......<br><br>
Wake up, Neo...<br>
The matrix has you...<br>
Follow the white rabbit...<br>
Knock, knock, Neo...<br>
.<br>
.<br>
.<br>
call trans opt: received. 10-15-2002 11:44:26 REC:log><br>
WARNING: carrier anomaly<br>
Trace program: running<br>
.<br>
.<br>
.<br>
I know you're up there<br>
I can feel it now<br>
I know that you're afraid<br>
You're afraid of us<br>
You're afraid of change<br>
.<br>
.<br>
.<br>
::::SYSTEM FAILURE::::<br>
.<br>
.<br>
.<br>
I don't konw the future<br>
I didn't come here to tell you how this is going to end<br>
I came here to tell you how it's going to begin<br>
I'm going to hang up this phone<br>
And then I'm going to show these people what you don't want them to see<br>
I'm going to show them a world<br>
WITHOUT YOU<br>
A world without rules and controls, without borders and boundaries<br>
A world where anything is possible<br>
Where we go from there<br>
IS A CHOICE I LEAVE TO YOU<br>
.<br>
.<br>
.<br>
</div>

你可能感兴趣的:(offsetheight)