Element.getBoundingClientRect()
Метод Element.getBoundingClientRect()
возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).
Синтаксис
domRect = element.getBoundingClientRect();
Возвращаемое значение
Данный метод возвращает объект DOMRect
(en-US), который является объединением прямоугольников, возвращаемых методом getClientRects()
(en-US) для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left
, 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
(en-US) и 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
.
Для кроссбраузерности надёжно использовать только left
, top
, right
, и 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
свойства top
, left
, right
и bottom
вычисляются, используя значения других свойств объекта.
Браузерная совместимость
BCD tables only load in the browser
Смотрите также
getClientRects()
(en-US)- MSDN:
getBoundingClientRect
- MSDN:
ClientRect
, более ранняя версияDOMRect
Element.getClientRects()
(en-US)