1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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))
&& typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
// Zamiast scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
&& 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&MSPPError=-2147217396">MSDN <code>getBoundingClientRect</code></a></li>
<li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li>
</ul>
|
