Element.getBoundingClientRect()

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

Синтаксис

rectObject = object.getBoundingClientRect();

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

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

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

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

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

Для кроссбраузерной совместимости используйте 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();

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

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

• CSSOM Views: The getClientRects() and getBoundingClientRect() methods

Примечания

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

См. также

• MSDN: getBoundingClientRect Method
• getClientRects()