JS getBoundingClientRect: определение координат элемента на странице

Метод getBoundingClientRect() в JavaScript используется для получения объекта DOMRect, который содержит координаты и размеры прямоугольника, в котором находится элемент.

Пример использования метода getBoundingClientRect():

HTML:

html

CSS:

css
#example {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  margin: 10px;
}

JavaScript:

javascript
const element = document.getElementById('example');
const rect = element.getBoundingClientRect();
console.log(rect);

В данном примере мы создаем прямоугольный блок с помощью HTML и CSS. Затем мы получаем этот элемент с помощью метода getElementById() и сохраняем его в переменную element. Далее, мы вызываем метод getBoundingClientRect() на этом элементе и сохраняем результат в переменной rect. Наконец, мы выводим объект DOMRect в консоль с помощью метода console.log().

Пример вывода в консоль:


DOMRect {x: 11, y: 11, width: 102, height: 52, top: 11, …}
  bottom: 63
  height: 52
  left: 11
  right: 113
  top: 11
  width: 102
  x: 11
  y: 11
  __proto__: DOMRect

Объект DOMRect содержит следующие свойства:

x: координата X левого верхнего угла прямоугольника относительно окна
y: координата Y левого верхнего угла прямоугольника относительно окна
width: ширина прямоугольника
height: высота прямоугольника
top: координата Y левого верхнего угла прямоугольника относительно документа
right: координата X правого нижнего угла прямоугольника относительно документа
bottom: координата Y правого нижнего угла прямоугольника относительно документа
left: координата X левого верхнего угла прямоугольника относительно документа

Например, чтобы получить координату X правого нижнего угла прямоугольника, можно использовать следующий код:

javascript
const element = document.getElementById('example');
const rect = element.getBoundingClientRect();
const bottomRightX = rect.right;
console.log(bottomRightX);

Пример вывода в консоль:

Также можно использовать объект DOMRect для вычисления других параметров элемента, например, его центра:

javascript
const element = document.getElementById('example');
const rect = element.getBoundingClientRect();
const centerX = rect.x + rect.width / 2;
const centerY = rect.y + rect.height / 2;
console.log(centerX, centerY);

Пример вывода в консоль:


62 36

Таким образом, метод getBoundingClientRect() может быть полезен при работе с элементами на странице, когда нужно получить координаты или размеры элемента.

JS getBoundingClientRect: определение координат элемента на странице

Похожие вопросы на: "js getboundingclientrect "