Метод getBoundingClientRect в JavaScript

Метод getBoundingClientRect содержит объект координат элемента. Координаты рассчитываются относительного видимой части страницы без учета прокрутки (относительно окна). То есть как при свойстве position в значении fixed. В возвращаемом объекте содержатся свойства: left, top, right, bottom, width, height. Стоит отметить, что эти свойства не имеют ничего общего с CSS свойствами. В них содержатся расстояния до соответствующих сторон элемента. Для left/right — от левой границы видимой области страницы, а для top/bottom — верхней.

Синтаксис

элемент.getBoundingClientRect()

Пример

Получим координаты элемента:

<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
border: 1px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());