HTML DOM Element getBoundingClientRect() Method

Definition and Usage

getBoundingClientRect() The method returns the size of the element and its position relative to the viewport.

getBoundingClientRect() The method returns a DOMRect object with eight properties:

  • left
  • top
  • right
  • bottom
  • x
  • y
  • width
  • height

Tip:This includes completed scrolling. This means that every time the scroll position changes, the edges (top, left, bottom, and right) of the rectangle will change their values.

Example

Returns the size of the element and its position relative to the viewport:

const rect = element.getBoundingClientRect();

Try it yourself

Syntax

element.getBoundingClientRect()

Return value

Type Description
Object

The DOMRect object has eight properties:

  • left
  • top
  • right
  • bottom
  • x
  • y
  • width
  • height

Browser support

All browsers support element.getBoundingClientRect():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support