getBoundingClientRect method
The getBoundingClientRect method
contains an element coordinate object.
Coordinates are calculated relative to
the visible part of the page without
scrolling (relative to the window). That
is, as with the
position
property in the value fixed.
The returned object contains the following
properties: left, top,
right, bottom, width,
height. It's worth noting that these
properties have nothing to do with CSS
properties. They contain the distances
to the corresponding sides of the element.
For left/right - from the left border
of the visible area of a page, and for
top/bottom - from the top.
Syntax
element.getBoundingClientRect();
Example
We get element coordinates:
<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
border: 1px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());
See also
-
the
offsetParentproperty
that contains a parent with positioning -
the
offsetTopproperty
that contains the top offset of an element -
the
offsetLeftproperty
that contains the left offset of an element -
the
elementFromPointmethod
that returns an element by coordinates