Метод 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());
Смотрите также
-
свойство
offsetParent,
которое содержит родителя с позиционированием -
свойство
offsetTop,
которое содержит смещение элемента сверху -
свойство
offsetLeft,
которое содержит смещение элемента слева -
метод
elementFromPoint,
которое возвращает элемент по координатам