1 files changed, 146 insertions, 0 deletions
diff --git a/files/pl/web/api/element/getboundingclientrect/index.html b/files/pl/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..dc189b37af
--- /dev/null
+++ b/files/pl/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,146 @@
+---
+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>