Метод getBoundingClientRect

Метод 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());

Смотрите также

свойство offsetParent,
которое содержит родителя с позиционированием
свойство offsetTop,
которое содержит смещение элемента сверху
свойство offsetLeft,
которое содержит смещение элемента слева
метод elementFromPoint,
которое возвращает элемент по координатам