Метод 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,
    которое возвращает элемент по координатам