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 支持 支持 支持 支持