HTML DOM getBoundingClientRect() Method

HTML DOM Element Object

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

The returned value is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, and height.

Note:When calculating the boundary rectangle, the scroll amount of the viewport area must be considered. This means that whenever the scroll position changes, the edges (top, left, bottom, and right) of the rectangle will change their values.

Syntax:

element.getBoundingClientRect()

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();

Browser Compatibility

All browsers fully support the getBoundingClientRect() method:

Technical Details

HTML DOM Element Object