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

Синтаксис

domRect = element.getBoundingClientRect();

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

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

Пустые 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 andwindow.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, heightvar rect = obj.getBoundingClientRect();

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

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

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

• getClientRects()
• MSDN:getBoundingClientRect
• MSDN:ClientRect, более ранняя версияDOMRect
• Element.getClientRects()