Элемент: метод getBoundingClientRect()

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

Нет.

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

Свойства width и height объекта DOMRect, возвращаемого методом, включают padding и border-width, а не только ширину/высоту содержимого. В стандартной модели блоков это будет равно свойству width или height элемента + padding + border-width. Но если для элемента установлено значение box-sizing: border-box, это будет напрямую равно его свойству width или height.

Возвращаемое значение можно рассматривать как объединение прямоугольников, возвращаемых методом getClientRects() для элемента, то есть прямоугольников CSS-рамок, связанных с элементом.

Пустые рамки полностью игнорируются. Если все рамки элемента пустые, возвращается прямоугольник с width и height равными нулю, а top и left — это верхний левый угол рамки первого CSS-блока (в порядке содержимого) для элемента.

При вычислении ограничивающего прямоугольника учитывается количество прокручивания области просмотра (или любого другого прокручиваемого элемента). Это означает, что грани прямоугольника (top, right, bottom, left) изменяют свои значения каждый раз, когда изменяется положение прокрутки (поскольку их значения относительны к области просмотра, а не абсолютны).

Если вам нужен ограничивающий прямоугольник, относительный к верхнему левому углу документа, просто добавьте текущее положение прокрутки к свойствам top и left (эти значения можно получить с помощью window.scrollY и window.scrollX), чтобы получить ограничивающий прямоугольник, независимый от текущего положения прокрутки.

В этом простом примере извлекается объект DOMRect, представляющий ограничивающий прямоугольник клиентской области простого элемента <div>, и выводятся его свойства ниже.

<div></div>

div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}

Обратите внимание, как width/height равны его width/height + padding.

Также обратите внимание, как значения x/left, y/top, right, и bottom равны абсолютному расстоянию от соответствующего края области просмотра до соответствующей стороны элемента.

В этом примере показано, как изменяется ограничивающий прямоугольник клиентской области при прокрутке документа.

<div id="example"></div>
<div id="controls"></div>

div#example {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

body {
  padding-bottom: 1000px;
}
p {
  margin: 0;
}

function update() {
  const container = document.getElementById("controls");
  const elem = document.getElementById("example");
  const rect = elem.getBoundingClientRect();

  container.textContent = "";
  for (const key in rect) {
    if (typeof rect[key] !== "function") {
      let para = document.createElement("p");
      para.textContent = `${key} : ${rect[key]}`;
      container.appendChild(para);
    }
  }
}

document.addEventListener("scroll", update);
update();

• getClientRects()