DOM. GetBoundingClientRect

🧱 Суть

getBoundingClientRect() – встроенный метод DOM API, который возвращает информацию о положении и размерах HTML-элемента относительно окна браузера.

Проще: получить прямоугольник элемента на экране.

📦 Проблема

1. Браузер не знает размеры элемента в виде обычных свойств

Например:

element.width
element.position

таких универсальных свойств у DOM-элементов нет.

2. Для сложных UI нужно знать реальное расположение элемента

Например:

открыть tooltip рядом с кнопкой
позиционировать dropdown
определить пересечение элементов
реализовать drag & drop

✅ Решение

Использовать:

element.getBoundingClientRect();

Метод доступен у любого HTML-элемента.

💻 Код

Получение размеров элемента:

const element = document.querySelector('#avatar');
 
const rect = element.getBoundingClientRect();
 
console.log(rect);

Результат:

{
  top: 42,
  left: 120,
  right: 220,
  bottom: 142,
  width: 100,
  height: 100,
  x: 120,
  y: 42
}

Что возвращает

Свойство	Значение
`top`	расстояние от верхнего края окна
`left`	расстояние от левого края окна
`right`	правая граница элемента
`bottom`	нижняя граница элемента
`width`	ширина элемента
`height`	высота элемента
`x`	координата по X
`y`	координата по Y

Использование в React

Часто применяется вместе с ref:

const avatarRef = useRef<HTMLDivElement>(null);
 
const rect = avatarRef.current?.getBoundingClientRect();

ref даёт доступ к реальному DOM-элементу.

Пример применения

Tooltip:

button
  ↓
getBoundingClientRect()
  ↓
получили координаты
  ↓
разместили tooltip рядом

Также используется для:

dropdown-меню
модальных окон
drag & drop
анимаций
определения видимости элементов

Важно

Координаты считаются относительно viewport (окна браузера).

То есть:

rect.top

– это расстояние от верхней границы текущего окна, а не всей страницы.

При прокрутке страницы значения могут изменяться.

🎯 Вывод

getBoundingClientRect() – метод DOM API
React не предоставляет его, он работает напрямую с браузером
возвращает размеры и координаты элемента
используется для точного позиционирования элементов интерфейса

LETUNOFF DOCS

Навигация