тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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