HTML DOM Element getBoundingClientRect() 方法

定义和用法

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

getBoundingClientRect() 方法返回的是拥有八个属性的 DOMRect 对象：

提示：已经完成的滚动也算在内。这意味着每次滚动位置更改时，矩形的边缘（top、left、bottom 以及 right）都会更改其值。

返回元素的大小及其相对于视口的位置：

const rect = element.getBoundingClientRect();

element.getBoundingClientRect()

类型	描述
对象	拥有八个属性的 DOMRect 对象： left top right bottom x y width height

所有浏览器都支持 element.getBoundingClientRect()：

Chrome	IE	Edge	Firefox	Safari	Opera
Chrome	IE	Edge	Firefox	Safari	Opera
支持	9-11	支持	支持	支持	支持