Метод getBoundingClientRect

Метод getBoundingClientRect содержит объект координат элемента. Координаты рассчитываются относительного видимой части страницы без учета прокрутки (относительно окна). To есть как при свойстве position в значении fixed.

В возвращаемом объекте содержатся свойства: left, top, right, bottom, width, height. Стоит отметить, что эти свойства не имеют ничего общего с CSS свойствами. В них содержатся расстояния до соответствующих сторон элемента. Для left/right - от левой границы видимой области страницы, а для top/bottom - от верхней.

Синтаксис

javascriptэлемент.getBoundingClientRect();

Пример

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

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

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