Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (точки   просмотра или ширины экрана в пикселях CSS в масштабе 100%.)

Синтаксис

rectObject = object.getBoundingClientRect();

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

Данный метод возвращает объект TextRectangle, который является объединением прямоугольников, возвращаемых методом getClientRects()  для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом.

 

Возвращаемое значение — это объект TextRectangle, содержащий целый элемент со со следующими read-only (неизменяемыми) свойствами:

left (слева)

top (верх)

right (справа)

 bottom (низ)

 xy (xy  по оси координат)

width (ширина)

height (высота) -

 которые описывают css-коробку в рамке полностью, в пикселях.

Все свойства, кроме width (ширина) и height (высота)  даются относительно top-left of the viewport (верхнего левого угла  точки   просмотра экрана).

 

Примечание: Gecko 1.9.1 добавляет к этому объекту TextRectangle свойства width и height.

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

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

Если вам нужно сделать позицию описываемого прямоугольника относительной (relative)   по отношению к top-left (верхнему левому углу документа) - добавьте к свойствам top (верх)  и  left (слева)  текущую позицию прокрутки, используя:

window.scrollX  и

window.scrollY) -

чтобы получить прямоугольник, положение которого  не зависит от текущей позиции прокрутки.

Примечание: Начиная с Gecko 12.0, эффект CSS-трансформаций учитывается при вычислении прикрепляемого прямоугольника элемента.

Для кроссбраузерной совместимости используйте:  window.pageXOffset и window.pageYOffset - вместо window.scrollX и window.scrollY.  

Для устаревших браузеров, не поддерживающих window.pageXOffset, window.pageYOffset,window.scrollX,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();

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
getBoundingClientRectChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 4Opera Полная поддержка ДаSafari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка Да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 Полная поддержка Да
widthChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android ? Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
heightChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? 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 Полная поддержка ДаEdge Mobile ? 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 Полная поддержка ДаEdge Mobile ? Firefox Android ? Opera Android Полная поддержка ДаSafari iOS ? Samsung Internet Android ?

Легенда

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

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

Примечания

Метод getBoundingClientRect() был впервые введён в объектной модели MS IE DHTML.

См. также