Element.getBoundingClientRect()

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

Метод 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. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:

// Для 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

Пример

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

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

Спецификация Статус Комментарий
CSS Object Model (CSSOM) View Module
Определение 'Element.getBoundingClientRect()' в этой спецификации.
Рабочий черновик Initial definition

Примечания

Возвращаемый DOMRect объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали DOMRectReadOnly. У IE и Edge, не имея возможности добавить пропущенные свойства к возращаемым ими ClientRect, объект не позволял добавить x и y.

Для кроссбраузерности надежно использовать только lefttopright, и bottom.

Свойства у DOMRect не являются собственными. in оператор и for...in найдут возвращенные значение, но другие APIs, Object.keys(), — нет. А еще Object.assign() и spread оператор не копируют их.

rect = elt.getBoundingClientRect()
// emptyObj всегда {} 
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect

DOMRect свойства topleftright и bottom вычисляются, используя значения других свойств объекта.

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
getBoundingClientRectChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 4Opera Полная поддержка ДаSafari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Safari for iOS will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.
Samsung Internet Android Полная поддержка Да
heightChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
widthChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
xChrome Полная поддержка ДаEdge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Полная поддержка ДаIE Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS ? Samsung Internet Android ?
yChrome Полная поддержка ДаEdge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Полная поддержка ДаIE Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.

См. также