-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
76 lines (51 loc) · 1.41 KB
/
index.md
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
---
title: "Range: getClientRects() method"
short-title: getClientRects()
slug: Web/API/Range/getClientRects
page-type: web-api-instance-method
browser-compat: api.Range.getClientRects
---
{{ApiRef("DOM")}}
The **`Range.getClientRects()`** method returns a list of {{domxref("DOMRect")}} objects representing the area of the screen occupied by the [range](/en-US/docs/Web/API/Range). This is created by aggregating the results of calls to
{{ domxref("Element.getClientRects()") }} for all the elements in the range.
## Syntax
```js-nolint
getClientRects()
```
### Parameters
None.
### Return value
An [iterable](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) sequence of {{domxref("DOMRect")}} objects.
## Examples
### Logging selected client rect sizes
#### HTML
```html
<div></div>
<pre id="output"></pre>
```
#### CSS
```css
div {
height: 80px;
width: 200px;
background-color: blue;
}
```
#### JavaScript
```js
const range = document.createRange();
range.selectNode(document.querySelector("div"));
rectList = range.getClientRects();
const output = document.querySelector("#output");
for (const rect of rectList) {
output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}
```
#### Result
{{EmbedLiveSample("Logging selected client rect sizes")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("Range")}}