Метод getBoundingClientRect() в JavaScript

Метод getBoundingClientRect() возвращает объект DOMRect с текущим размером и положением элемента относительно видимой области браузера.

• Размер и положение элемента
• Координаты относительно документа
• Итого

Размер и положение элемента

<div class="card">Карточка</div>

.card {
  width: 200px;
  height: 100px;
  padding: 16px;
  border: 2px solid #2d3748;
}

const card = document.querySelector('.card');
const rect = card.getBoundingClientRect();

console.log(rect.width);
console.log(rect.height);
console.log(rect.top);
console.log(rect.left);

width и height содержат размеры элемента в CSS-пикселях. top и left - координаты верхней и левой границ возвращённого прямоугольника относительно видимой области браузера.

Размеры учитывают padding и границы элемента, но не внешние отступы. CSS-преобразования через transform тоже влияют на возвращаемые размеры и координаты. Метод только читает значения и ничего не меняет на странице.

Если у элемента или его родителя задано display: none, у элемента нет блока в раскладке, поэтому width и height будут равны 0. Перед измерением элемент нужно показать.

Координаты относительно документа

top и left не показывают расстояние от начала документа. После прокрутки или изменения раскладки старый объект rect не обновится сам. Чтобы получить новые данные, вызовите метод ещё раз.

Если нужна координата относительно всего документа, добавьте текущую прокрутку страницы.

const rect = card.getBoundingClientRect();

const topOnPage = rect.top + window.scrollY;
const leftOnPage = rect.left + window.scrollX;

Итого

getBoundingClientRect() помогает узнать текущий размер и положение элемента на экране. Для размеров используйте width и height, для положения - top и left.