GetBoundingClientRect() - метод для работы с размерами и позиционированием элементов на странице

Метод getBoundingClientRect() возвращает объект DOMRect, который представляет собой наименьший прямоугольник, охватывающий элемент. DOMRect является объектом со свойствами left, top, right, bottom, x, y, width, и height, которые представляют соответствующие значения координат и размеров элемента.

Пример кода:

html

В этом примере мы объявляем прямоугольник div с ID "box" и определяем его стиль, используя CSS. Затем мы используем метод getBoundingClientRect() для получения DOMRect объекта для элемента с ID "box". Мы выводим значения его свойств: width, height, left и top и получаем результат в консоли.

Метод getBoundingClientRect() особенно полезен при работе с элементами, которые имеют позицию, заданную с помощью абсолютной или относительной позиции CSS. Также его можно использовать для определения позиции элемента относительно других элементов на странице.