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, 统一被指定为视口的宽度.
来源: http://www.bubuko.com/infodetail-2988702.html