对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

淩亂°似流年 2022-08-25 13:55 153阅读 0赞

一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果：  
1.offsetTop     :  
当前对象到其上级层顶部的距离.  
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft    :  
当前对象到其上级层左边的距离.  
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth   :  
当前对象的宽度.  
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :  
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent  :  
当前对象的上级层对象.  
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.  
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] ![None.gif][]得到绝对位置脚本代码    
 1function GetPosition(obj)  
 2![ExpandedBlockStart.gif][]![ContractedBlock.gif][]![dot.gif][]\{  
 3![InBlock.gif][]    var left = 0;  
 4![InBlock.gif][]    var top  = 0;  
 5![InBlock.gif][]  
 6![InBlock.gif][]    while(obj != document.body)  
 7![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
 8![InBlock.gif][]        left = obj.offsetLeft;  
 9![InBlock.gif][]        top  = obj.offsetTop;  
10![InBlock.gif][]  
11![InBlock.gif][]        obj = obj.offsetParent;  
12![ExpandedSubBlockEnd.gif][]    \}  
13![InBlock.gif][]  
14![InBlock.gif][]    alert("Left Is : " \+ left \+ "/r/n" \+ "Top  Is : " \+ top);  
15![ExpandedBlockEnd.gif][]\}

6.scrollLeft    :  
对象的最左边到对象在当前窗口显示的范围内的左边的距离．  
即是在出现了横向滚动条的情况下，滚动条拉动的距离．  
  
7.scrollTop  
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．  
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，[点击这里][Link 1]查看。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

**clientHeight**  
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

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

**scrollHeight**  
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。  
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

**简单地说**  
clientHeight 就是透过浏览器看内容的这个区域高度。  
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。  
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

**同理**  
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

**说明**  
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览[测试文件][Link 2]。

[ContractedBlock.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[None.gif]: /images/20220824/fa4f7636f5ba4020a59da754832c3401.png
[dot.gif]: /images/20220824/f79ffb58f3284c2d9e27c8b6fb08b52b.png
[InBlock.gif]: /images/20220824/e29cdc5ae6524f118562382cb2342823.png
[ExpandedSubBlockStart.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif
[ExpandedSubBlockEnd.gif]: /images/20220824/e06b78746b6e4f34a496b32e207a29c9.png
[ExpandedBlockEnd.gif]: /images/20220824/0bb87ee6d0804db9bfb662b55ec67f85.png
[Link 1]: http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp
[Link 2]: http://www.cftea.com/c/751/PX8O1XEX53RM4DIW.htm