js中getBoundingClientRect()方法详解
-> Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
- 语法
domRect = element.getBoundingClientRect();
返回值
是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合,就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形,并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
兼容性
- 注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
补充
该API返回的 DOMRect 对象在现代浏览器中可以被修改。而对于返回值为 DOMRectReadOnly 的旧版本,返回值并不能被修改。在IE和Edge浏览器中,无法向他们返回的 ClientRect 对象添加缺失的属性,对象可以防止 x 和 y 的回填。
由于兼容性问题,尽量仅使用 left, top, right, 和 bottom.属性是最安全的。
返回的 DOMRect对象中的属性不是自己的属性。 当使用in 和 for…in 运算符时能成功查找到返回的属性,但使用其他API(例如Object.keys())查找时将失败。 而且,ES2015和更高版本的功能(如Object.assign()和对象rest/spread)将无法复制返回的属性。
rect = elt.getBoundingClientRect()
// The result in emptyObj is {}
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect
DOMRect 中的 top, left, right, bottom 属性是使用对象的其他属性的值来计算获得的。