---
title: Element.getBoundingClientRect()
slug: Web/API/Element/getBoundingClientRect
tags:
  - API
  - Metoda(2)
  - Pudełko
  - Widok CSSOM
translation_of: Web/API/Element/getBoundingClientRect
---
<div>{{APIRef("DOM")}}</div>

<p>Metoda <code><strong>Element.getBoundingClientRect()</strong></code> zwraca rozmiar  oraz  położenie elementu względem okna widoku (viewport).</p>

<h2 id="Składnia">Składnia</h2>

<pre class="syntaxbox"><var>rectObject</var> = <var>object</var>.getBoundingClientRect();
</pre>

<h3 id="Wynik">Wynik</h3>

<p>Zwrócony  jest obiekt <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect">DOMRect</a>,  wyznaczony z tablicy prostokątów zwróconych przez  metodę <code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code>, zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek  CSS związanych z danym elementem.</p>

<p>Zwrócony obiekt  <code>DOMRect</code> posiada następujące (tylko do odczytu) właściwości: <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom,</code>  opisujące parametry otaczającego element pudełka w  pikselach. Właściwości <code>top</code> and <code>left</code>  oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.</p>

<div class="note">
<p><strong>Uwaga:</strong> {{Gecko("1.9.1")}} dodało właściwości <code>width</code> and <code>height</code> do obiektu <code>DOMRect</code>.</p>
</div>

<p>Puste pudełka są całkowicie ignorowane. Jeśli wszystkie elementy pudełka są puste, to zwrócony prostokąt ma wysokość i szerokość równą zero zaś własności <code>top</code> oraz <code>left </code>dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element<code>.</code></p>

<p>Efekt przewijania (scrolling) okna widoku  (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości <code>top</code> oraz <code>left</code> zmieniają się natychmiast po dowolnym przewinięciu (są więc względne w stosunku do widoku, a więc nie są absolutne). W celu wyznaczenia absolutnego położenie elementu  należy do właściwości <code>top </code>oraz <code>left </code>dodać aktualne pozycje przesuwania (scrolling position)  (można je uzyskać za  pomocą <code>window.scrollX</code> and <code>window.scrollY</code>).</p>

<p>Skrypty wymagające  zgodności z różnymi przeglądarkami mogą korzystać z metod  <code>window.pageXOffset</code> oraz <code>window.pageYOffset</code> zamiast <code>window.scrollX</code> oraz <code>window.scrollY.</code> Skrypty które nie mają dostępu do  <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ani <code>window.scrollY</code> mogą stosować następujący kod :</p>

<pre class="brush:js">// Zamiast scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
// Zamiast scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
</pre>

<h2 id="Przykład">Przykład</h2>

<pre class="brush:js">// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height
var rect = obj.getBoundingClientRect();
</pre>

<h2 id="Specyfikacja">Specyfikacja</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specyfikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td>definicja początkowa</td>
  </tr>
 </tbody>
</table>

<h3 id="Uwagi">Uwagi</h3>

<p><code>Metoda getBoundingClientRect()</code> została wprowadzona po raz pierwszy w  modelu MS IE DHTML.</p>

<p>Wynik metody <code>getBoundingClientRect()</code> jest  obiektem <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">zamrożonym</a>.</p>

<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Właściwość</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Postawowe wsparcie</td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop(1.9)}}</td>
   <td>4.0<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>width/height</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
   <td>9</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Właściwość</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Postawowe wsparcie</td>
   <td>2.0</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile(1.9)}}</td>
   <td>6.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">specyfikacja CSS dla elementu 'use' </a> wskazującego na element  'symbol' wymaga aby domyślne wartości atrybutów  width oraz height elementu 'use' ustawione były na 100%. Również,  <a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute">specyfikacja CSS dla atrybutów width oraz height elementu 'svg'</a> wymaga 100%  jako wartości domyślne. Google Chrome nie przestrzega tych wymagań dla elementów  'use'. Chrome nie uwzględnia również  'stroke-width'. Zatem metoda   <code>getBoundingClientRect()</code> może zwrócić inny prostokąt w  Chrome  niż w Firefox.</p>

<p>[2] W IE8, oraz we wcześniejszych wersjach, obiekt  <code>DOMRect</code> zwrócony przez <code>getBoundingClientRect()</code> nie zawiera właściwości <code>height</code> ani <code>width</code>. Żadne dodatkowe właściwości (w tym <code>height</code> oraz <code>width</code>) nie mogą być dodane do tych obiektów <code>DOMRect</code>.</p>

<p>Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt  <a href="/en-US/docs/CSS/Using_CSS_transforms">transformacji CSS</a> jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).</p>

<h2 id="Patrz_również">Patrz również</h2>

<ul>
 <li><a href="https://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx?f=255&amp;MSPPError=-2147217396">MSDN <code>getBoundingClientRect</code></a></li>
 <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li>
</ul>