HTML DOM Element getBoundingClientRect()
Example
Return the size of an element and its position relative to the viewport:
const rect = element.getBoundingClientRect();
Try it Yourself »
Definition and Usage
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 | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |
