getBoundingClientRect

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

element.getBoundingClientRect() 返回 element 元素的什么信息呢？

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

参数

无。

返回值

返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

注意 x 与 left 是相等的。y 与 top 是相等的。

如果你需要获得边界矩形相对于整个网页左上角的位置，则可以将当前的滚动位置（可通过 window.scrollX 和 window.scrollY 获得）添加到 top 和 left 属性上。获得的边界矩形与当前的滚动位置无关。