html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转载)

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

• scrollHeight： 获取对象的滚动高度。
• scrollLeft： 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
• scrollTop： 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
• scrollWidth： 获取对象的滚动宽度
• offsetHeight： 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
• offsetLeft： 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
• offsetTop： 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
• event.clientX： 相对文档的水平座标
• event.clientY： 相对文档的垂直座标
• event.offsetX： 相对容器的水平坐标
• event.offsetY： 相对容器的垂直坐标
• document.documentElement.scrollTop： 垂直方向滚动的值
• event.clientX+document.documentElement.scrollTop： 相对文档的水平座标+垂直方向滚动的量

这里是javascript中建造迁移转变代码的常用属性

• 网页可见区域宽： document.body.clientWidth;
• 网页可见区域高： document.body.clientHeight;
• 网页可见区域宽： document.body.offsetWidth   （包含边线的宽）;
• 网页可见区域高： document.body.offsetHeight （包含边线的宽）;
• 网页正文全文宽： document.body.scrollWidth;
• 网页正文全文高： document.body.scrollHeight;
• 网页被卷去的高： document.body.scrollTop;
• 网页被卷去的左： document.body.scrollLeft;
• 网页正文项目组上： window.screenTop;
• 网页正文项目组左： window.screenLeft;
• 屏幕辨别率的高： window.screen.height;
• 屏幕辨别率的宽： window.screen.width;
• 屏幕可用工作区高度： window.screen.availHeight;

 

总结：

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时则不会有问题.

6.scrollLeft :

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

7.scrollTop

对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同。

8、浏览器差异

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 的解释与上面相同，只是把高度换成宽度即可。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。