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()

返回值

类型 描述
对象

拥有八个属性的 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 支持 支持 支持 支持