Range: getClientRects() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
The Range.getClientRects()
method returns a list of DOMRect
objects representing the area of the screen occupied by the range. This is created by aggregating the results of calls to
Element.getClientRects()
for all the elements in the range.
Syntax
js
getClientRects()
Parameters
None.
Return value
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
Specifications
Specification |
---|
CSSOM View Module # dom-range-getclientrects |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getClientRects |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.