---
title: Element.getBoundingClientRect()
slug: Web/API/Element/getBoundingClientRect
tags:
  - API
  - DOM
  - JavaScript
  - getBoundingClientRect
  - Позиция
  - Прямоугольник
  - Самый маленький
  - Справка
  - Элемент
  - метод
translation_of: Web/API/Element/getBoundingClientRect
---
<div>{{APIRef("DOM")}}</div>

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

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>

<h3 id="Returns" name="Returns">Возвращаемое значение</h3>

<p>Данный метод возвращает объект {{domxref("DOMRect")}}, который является объединением прямоугольников, возвращаемых методом {{domxref("Element.getClientRects", "getClientRects()")}}  для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> свойствами, описывающие это в пикселях. Все свойства, кроме <code>width</code> и <code>height</code>, являются относительными к верхнему левому углу viewport-а.</p>

<p style="display: block;"><img alt="Explanation of DOMRect values" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>

<p>Пустые border-box полностью игнорируются. Если border-box элемента пуст, прямоугольник возвращается с нулевыми <code>width</code> и <code>height</code>, а <code>top</code> и <code>left</code> берутся у следующего CSS элемента (в порядке контента).</p>

<p>После каждого скролла значения <code>left</code>, <code>top</code>, <code>right</code> и <code>bottom</code> изменяются, так как эти значения относительны к viewport и не абсолютные.</p>

<p>Если вам нужны значения, описывающие прямоугольник относительно к верхнему левому углу документа, просто добавьте к свойствам <code>top</code> и <code>left</code> текущую позицию прокрутки, используя {{domxref("window.scrollX")}} и {{domxref("window.scrollY")}}), чтобы получить прямоугольник, положение которого не зависит от текущей позиции прокрутки.</p>

<h3 id="Про_кроссбраузерность">Про кроссбраузерность</h3>

<p>Скрипты, требующих высокую кроссбраузерность, могут использовать {{domxref("window.pageXOffset")}} и {{domxref("window.pageYOffset")}} вместо <code>window.scrollX</code> and <code>window.scrollY</code>. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:</p>

<pre class="brush: js"><code>// Для scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// Для scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop</code></pre>

<h2 id="Пример"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Пример</span></h2>

<pre class="brush: js"><code>// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();</code></pre>

<h2 id="Спецификация">Спецификация</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h3 id="Notes" name="Notes">Примечания</h3>

<p>Возвращаемый <code>DOMRect</code> объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали <code>DOMRectReadOnly</code>. У IE и Edge, не имея возможности добавить пропущенные свойства к возвращаемым ими <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, объект не позволял добавить <code>x</code> и <code>y</code>.</p>

<p>Для кроссбраузерности надёжно использовать только <code>left</code>, <code>top</code>, <code>right</code>, и <code>bottom</code>.</p>

<p>Свойства у <code>DOMRect</code> не являются собственными. <code>in</code> оператор и <code>for...in</code> найдут возвращённые значение, но другие APIs, <code>Object.keys()</code>, — нет. А ещё <code>Object.assign()</code> и spread оператор не копируют их.</p>

<pre><code>rect = elt.getBoundingClientRect()
// emptyObj всегда {}
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect</code></pre>

<p><code>DOMRect</code> свойства <code>top</code>, <code>left</code>, <code>right</code> и <code>bottom</code> вычисляются, используя значения других свойств объекта.</p>

<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>

<div>
<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
 <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
 <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, более ранняя версия <code>DOMRect</code></li>
 <li></li>
 <li>{{DOMxRef("Element.getClientRects()")}}</li>
</ul>