HTMLElement.offsetParent
由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大。offsetParent的机制与css中包含块的概念十分类似但并不完全一致,其不一致有时候是由于浏览器的不同而导致的,例如:当元素为固定定位时(fixed),chrome浏览器的 offsetParent 值为 Null,而火狐的则为 body 元素。总结规律如下:
- 规则(当html和body之间的margin被清除时):
-
本身定位为fixed 本身定位非fiexd offsetParent 火狐 非火狐 父级无定位 父级有定位 body null body 有定位的父级 - 尽管本身定位为fixed时,非火狐浏览器为null,body.offsetTop 和 body.offsetLeft的值仍然为0(即默认值为0)。因此,当html和body之间的margin值被清除时,就可以视为 offsetLeft 和 offsetTop 也是参照于 body 的。
HTMLElement.offsetLeft
offsetLeft 是一个只读属性,返回当前元素左上角相对于 offsetParent 节点的左边界偏移的像素值。
HTMLElement.offsetTop
offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离。
获取元素在页面中的位置
1.获取绝对位置 --- 原生实现
-
while循环叠加offsetParent的offsetTop和offsetLeft计算出元素的绝对位置,元素的 boder 和 margin 会影响这个函数的取值。 不推荐使用
-
function getPointAb(node){ //while循环叠加offsetParent的offsetTop和offsetLeft var x =0; var y = 0; while(node){ x+=node.offsetLeft; y+=node.offsetTop; node = node.offsetParent; } return {x:x,y:y}; }
2.获取滚动条滚动的距离
L = document.documentElement.scrollLeft||document.body.scrollLeft;
T = document.documentElement.scrollTop||document.body.scrollTop;
3.获取相对位置 --- 原生实现
- 在while循环叠加取得绝对位置的基础上,减去滚动条滚动的距离。没有办法兼容border和margin
-
//boder margin会影响这个函数的取值 function getPointRe(node){ //while循环叠加offsetParent的offsetTop和offsetLeft var x =0; var y = 0; while(node){ x+=node.offsetLeft; y+=node.offsetTop; node = node.offsetParent; } var L = document.documentElement.scrollLeft||document.body.scrollLeft; var T = document.documentElement.scrollTop||document.body.scrollTop; return {x:x-L,y:y-T}; }
4.Element.getBoundingClientRect() --- 兼容性好
- 返回值:对象
- width:border-box的宽
- height:border-box的高
- top:元素border-box的左上角的相对位置纵坐标
- left:元素border-box的左上角的相对位置横坐标
- bottom:元素border-box的右下角的相对位置的纵坐标
- right:元素border-box的右下角的相对位置的横坐标
获取元素尺寸
1.offsetWidth & offsetHeight
- 该属性是一个只读属性,返回一个元素的尺寸(宽度or高度)
- 其返回值为元素可视区域(padding box)的大小加上边框的大小,即 padding box(可视区域) + border
- 此属性会返回一个四舍五入的小数,若想得到更精确的值,可以使用 getBoundingClientRect() 方法
- 返回值 = 边框(border) + 内边距(padding) + 相应方向滚动条(scrollbar) + CSS设置的宽度(width)或高度(height)的值。
2.clientWidth & clientHeight
- 该属性表示元素的内部宽度,单位值为像素
- 此属性会返回一个四舍五入的小数
- 其返回值为元素可视区域(padding box)的大小
- 注意:当用此属性获取根标签的大小时,无论根标签有没有margin,都会无视margin返回屏幕视口的尺寸(即 document.documentElement.clentWidth 返回该设备屏幕分辨率)
tips:在ie10及ie10以下,根标签的clientWidth和offsetWidth,统一被指定为视口的宽度。