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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
---
title: Element.getClientRects()
slug: Web/API/Element/getClientRects
translation_of: Web/API/Element/getClientRects
---
<div>{{APIRef("DOM")}}</div>
<p><code><strong>getClientRects()</strong></code> метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS border box</a> в клієнта.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><code>let <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre>
<h3 id="Return_value">Return value</h3>
<p>Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання <code>left</code>, <code>top</code>, <code>right</code> <code>і bottom</code> властивості, які описують border box, в пікселях, з top-left відносно до top-left видимої області веб-сторінки. For tables with captions, the caption is included even though it's outside the border box of the table. When called on SVG elements other than an outer-<code><svg></code>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<code><svg></code> establishes (and to be clear, the rectangles are also transformed by the outer-<code><svg></code>'s <code>viewBox</code> transform, if any).</p>
<p>Originally, Microsoft intended this method to return a <code>TextRectangle</code> object for each <em>line</em> of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each <em>border box</em>. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.</p>
<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds <code>width</code> and <code>height</code> properties to the <code>TextRectangle</code> object.")}}</p>
<p>The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.</p>
<p>The returned rectangles do not include the bounds of any child elements that might happen to overflow.</p>
<p>For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, <code>display:none</code> elements, and generally any elements that are not directly rendered, an empty list is returned.</p>
<p>Rectangles are returned even for CSS boxes that have empty border-boxes. The <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code> coordinates can still be meaningful.</p>
<p>Fractional pixel offsets are possible.</p>
<h2 id="Examples">Examples</h2>
<p>These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class <code>withClientRectsOverlay</code>.</p>
<h3 id="HTML">HTML</h3>
<p>Example 1: This HTML creates three paragraphs with a <code><span></code> inside, each embedded in a <code><div></code> block. Client rects are painted for the paragraph in the second block, and for the <code><span></code> element in the third block.</p>
<pre class="brush: html"><h3>A paragraph with a span inside</h3>
<p>Both the span and the paragraph have a border set. The
client rects are in red. Note that the p has onlyone border
box, while the span has multiple border boxes.</p>
<div>
<strong>Original</strong>
<p>
<span>Paragraph that spans multiple lines</span>
</p>
</div>
<div>
<strong>p's rect</strong>
<p class="withClientRectsOverlay">
<span>Paragraph that spans multiple lines</span>
</p>
</div>
<div>
<strong>span's rect</strong>
<p>
<span class="withClientRectsOverlay">Paragraph that spans multiple lines</span>
</p>
</div></pre>
<p>Example 2: This HTML creates three ordered lists. Client rects are painted for the <code><ol></code> in the second block, and for each <code><li></code> element in the third block.</p>
<pre class="brush: html"><h3>A list</h3>
<p>Note that the border box doesn't include the number, so
neither do the client rects.</p>
<div>
<strong>Original</strong>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
<div>
<strong>ol's rect</strong>
<ol class="withClientRectsOverlay">
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
<div>
<strong>each li's rect</strong>
<ol>
<li class="withClientRectsOverlay">Item 1</li>
<li class="withClientRectsOverlay">Item 2</li>
</ol>
</div></pre>
<p>Example 3: This HTML creates two tables with captions. Client rects are painted for the <code><table></code> in the second block.</p>
<pre class="brush: html"><h3>A table with a caption</h3>
<p>Although the table's border box doesn't include the
caption, the client rects do include the caption.</p>
<div>
<strong>Original</strong>
<table>
<caption>caption</caption>
<thead>
<tr><th>thead</th></tr>
</thead>
<tbody>
<tr><td>tbody</td></tr>
</tbody>
</table>
</div>
<div>
<strong>table's rect</strong>
<table class="withClientRectsOverlay">
<caption>caption</caption>
<thead>
<tr><th>thead</th></tr>
</thead>
<tbody>
<tr><td>tbody</td></tr>
</tbody>
</table>
</div></pre>
<h3 id="CSS">CSS</h3>
<p>The CSS draws borders around the paragraph and the <code><span></code> inside each <code><div></code> block for the first example, around the <code><ol></code> and <code>li</code> for the second example, and around <code><table></code>, <code><th></code>, and <code><td></code> elements for the third example.</p>
<pre class="brush: css">strong {
text-align: center;
}
div {
display: inline-block;
width: 150px;
}
div p, ol, table {
border: 1px solid blue;
}
span, li, th, td {
border: 1px solid green;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<p>The JavaScript code draws the client rects for all HTML elements that have CSS class <code>withClientRectsOverlay</code> assigned.</p>
<pre class="brush: js">function addClientRectsOverlay(elt) {
/* Absolutely position a div over each client rect so that its border width
is the same as the rectangle's width.
Note: the overlays will be out of place if the user resizes or zooms. */
var rects = elt.getClientRects();
for (var i = 0; i != rects.length; i++) {
var rect = rects[i];
var tableRectDiv = document.createElement('div');
tableRectDiv.style.position = 'absolute';
tableRectDiv.style.border = '1px solid red';
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
// We want rect.width to be the border width, so content width is 2px less.
tableRectDiv.style.width = (rect.width - 2) + 'px';
tableRectDiv.style.height = (rect.height - 2) + 'px';
document.body.appendChild(tableRectDiv);
}
}
(function() {
/* Call function addClientRectsOverlay(elt) for all elements with
assigned class "withClientRectsOverlay" */
var elt = document.getElementsByClassName('withClientRectsOverlay');
for (var i = 0; i < elt.length; i++) {
addClientRectsOverlay(elt[i]);
}
})();</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample('Examples', 680, 650)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h3 id="Notes">Notes</h3>
<p><code>getClientRects()</code> was first introduced in the MS IE DHTML object model.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Element.getClientRects")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{DOMxRef("Element.getBoundingClientRect()")}}</li>
<li>{{DOMxRef("Element.getClientRects()")}}</li>
</ul>
|
