Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Element.getBoundingClientRect()

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

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

Синтаксис

rectObject = object.getBoundingClientRect();

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

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

Возвращаемое значение — это объект TextRectangle, содержащий свойства только для чтения left, top, right и bottom, описывающие бокс с границами в пиксельном измерении. Значения top и left даются относительно верхнего левого угла порта просмотра.

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

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

Прокрутка области порта просмотра (или иного прокругиваемого элемента) учитывается при вычислении включающего прямоугольника. Это значит, что свойства 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

Пример

var rect = obj.getBoundingClientRect();

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

Функциональность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0 3.0 (1.9) 4.0 (Да) 4.0
Функциональность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.0 1.0 1.0 (1.9) 6.0 (Да) 4.0

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

Примечания

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

См. также

Метки документа и участники

 Внесли вклад в эту страницу: whoever777, alexandr-parkhomenko, fscholz, Niades, torbasow
 Обновлялась последний раз: whoever777,