Element.getBoundingClientRect()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).

Синтаксис

domRect = element.getBoundingClientRect();

Возвращаемое значение

Данный метод возвращает объект DOMRect, который является объединением прямоугольников, возвращаемых методом getClientRects() для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.

Explanation of DOMRect values

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

После каждого скролла значения left, top, right и bottom изменяются, так как эти значения относительны к viewport и не абсолютные.

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

Про кроссбраузерность

Скрипты, требующих высокую кроссбраузерность, могут использовать window.pageXOffset и window.pageYOffset вместо window.scrollX and window.scrollY. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:

js
// Для scrollX
(((t = document.documentElement) || (t = document.body.parentNode)) &&
typeof t.scrollLeft == "number"
  ? t
  : document.body
).scrollLeft(
  // Для scrollY
  ((t = document.documentElement) || (t = document.body.parentNode)) &&
    typeof t.scrollTop == "number"
    ? t
    : document.body,
).scrollTop;

Пример

js
// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();

Спецификации

Specification
CSSOM View Module
# dom-element-getboundingclientrect

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getBoundingClientRect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Смотрите также