offset与scroll等坐标函数介绍

获取大小的属性有 CSS ( 大小 +border) 属性对应的 offset 长宽属性(无标准的实事标准):
1. offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
CSS width + border 对应
2. offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。  
CSS height + border 对应
CSS ( 大小 -padding ) 属性对应的 client 长宽属性(无标准的实事标准):  
3. clientWidth
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
CSS width - 滚动条宽度 ( 如果有 )
对应
4. clientHeight
获取对象的高度,不计算任何边距 (margin) 、边框、滚动条或可能应用到该对象的补白 (padding)
CSS height - 滚动条宽度 ( 如果有 )
对应

获取位置信息的属性有:
几个 offset 属性(无标准的实事标准):
offset 坐标 0 点是 offsetParent 元素 content 区域的左上点
5. offsetParent
获取定义对象 offsetTop offsetLeft 属性的容器对象的引用。
CSS persition = absolute 时, left,top 属性值参照的元素。
Object is positioned relative to parent element’s position—or to the body object if its parent element is not positioned—using the top and left properties.
6. offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
CSS left( absolute )+margin 对应
7. offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。

CSS top(absolute)+margin 对应



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 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height

Leave a Reply

Spam Protection by WP-SpamFree