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

一直以来对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时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

得到绝对位置脚本代码
1function GetPosition(obj)
2

{
3

var left = 0;
4

var top = 0;
5

while(obj != document.body)
7

{
8

left = obj.offsetLeft;
9

top = obj.offsetTop;
10

obj = obj.offsetParent;
12

}
13

alert("Left Is : " + left + "/r/n" + "Top Is : " + top);
15

}

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

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

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

这四种浏览器分别为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 来启用不同的解释器。下载或浏览测试文件。

对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解相关推荐

【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)
JS和JQuery位置方法汇总前言总结: HTML: <div class="gFather"><div class="father"> ...
offsetTop和scrollTop的差别
近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...
offsetTop和scrollTop的区别
最近想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结如下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了 ...
【转】五、谈扩展方法的理解
[转]五.谈扩展方法的理解为什么要用扩展方法在说什么是扩展方法之前我们先来说说为什么要用扩展方法. 首先我们定义一个 Person 类: public class Person {/// < ...
python threading模块的方法_Python THREADING模块中的JOIN()方法深入理解
看了oschina上的两个代码,受益匪浅.其中对join()方法不理解,看python官网文档的介绍: join([timeout]):等待直到进程结束.这将阻塞正在调用的线程,直到被调用join() ...
sklearn中GBDT的一些参数、属性、方法的理解
文章目录 GBDT 分类器引入重要参数 loss learning_rate subsample n_estimators criterion max_depth min_samples_leaf ...
频域分析方法的理解（信号、频谱、能量谱、功率谱、倒频谱、小波分析）（终极教程）
信号频域分析方法的理解(频谱.能量谱.功率谱.倒频谱.小波分析) 参考文献,值得一读 https://blog.csdn.net/fengzhuqiaoqiu/article/details/1011 ...
hashCode()、equals()以及compareTo()方法的理解
原文出自:http://blog.sina.com.cn/s/blog_50d936c40100nvzz.html hashCode().equals()以及compareTo()方法的理解转载▼ ...
[react] 请说说你对react的render方法的理解
[react] 请说说你对react的render方法的理解 render是class组件中必须被重载的方法,组件执行render方法的条件如下: 初始渲染 this.setState方法,参数不能为 ...

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

对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解相关推荐

最新文章

热门文章