HTML DOM Element getBoundingClientRect()

❮ Previous ❮ Element Object Reference Next ❯

Example

Return the size of an element and its position relative to the viewport:

const rect = element.getBoundingClientRect();

Description

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

The getBoundingClientRect() method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.

Note

The scrolling that has been done is taken into account. This means that the rectangle's edges (top, left, bottom, and right) change their values every time the scrolling position changes.

Syntax

element.getBoundingClientRect()

Return Value

Type	Description
Object	A DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.

Browser Support

element.getBoundingClientRect() is supported in all browsers:


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

❮ Previous ❮ Element Object Reference Next ❯