正文
JS中关于位置和尺寸的api
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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 =;
var y = ;
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 返回该设备屏幕分辨率）
- while循环叠加offsetParent的offsetTop和offsetLeft计算出元素的绝对位置，元素的 boder 和 margin 会影响这个函数的取值。不推荐使用
function getPointAb(node){
//while循环叠加offsetParent的offsetTop和offsetLeft
var x =;
var y = ;
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};
}
- 返回值：对象
- 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，统一被指定为视口的宽度。
