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 สนับสนุน สนับสนุน สนับสนุน สนับสนุน