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