×

获取元素位置的方法:element.getBoundingClientRect()属性

作者:andy0012020.04.30来源:Web前端之家浏览:10539评论:0

getBoundingClientRect()用于获取某个元素相对于视窗的位置,以像素为单位。

语法

rectObject=object.getBoundingClientRect();

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合,就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形,并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

DOMRect 示例图空边框盒(译者注:没有内容的边框)会被忽略。如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为 0,left、top 值为第一个 CSS 盒子(按内容顺序)的 top-left 值。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过 window.scrollX 和 window.scrollY),这样就可以获取与当前的滚动位置无关的值。

跨浏览器兼容

如果需要更好的跨浏览器兼容性,请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

实例

// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
//译者注:DOMRect 是 TextRectangle 或 ClientRect 的标准名称,他们是相同的。
var rect = obj.getBoundingClientRect();

说明

该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 属性是使用对象的其他属性的值来计算获得的。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/reach80928398203984.html

网友评论文明上网理性发言 已有0人参与

发表评论: