HTML DOM getBoundingClientRect() Method
Example
Return the size of an element and its position relative to the viewport:
var rect = obj.getBoundingClientRect();
Try it Yourself »
Definition and Usage
The getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
This method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.
Note: The amount of scrolling that has been done of the viewport area is taken into account when computing the bounding rectangle. This means that the rectangle's edges (top, left, bottom, and right) change their values every time the scrolling position changes.
Browser Support
The numbers in the table specifies the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| getBoundingClientRect() | 1.0 | 9.0 | 3.0 | 4.0 | 9.5 |
Syntax
element.getBoundingClientRect()
Technical Details
| DOM Version: | CSS Object Model (CSSOM) View Module |
|---|---|
| Return Value: | A DOMRect object with eight properties: left, top, right, bottom, x, y, width, height. |
