HTML DOM Element getBoundingClientRect() 方法

定义和用法

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

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

• left

• top

• right

• bottom

• x

• y

• width

• height

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

实例

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

const rect = element.getBoundingClientRect();

亲自试一试

语法

element.getBoundingClientRect()

返回值

浏览器支持

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