Range: getClientRects() method

{{ApiRef("DOM")}}

The Range.getClientRects() method returns a list of {{domxref("DOMRect")}} objects representing the area of the screen occupied by the range. This is created by aggregating the results of calls to {{ domxref("Element.getClientRects()") }} for all the elements in the range.

Syntax

getClientRects()

Parameters

None.

Return value

An iterable sequence of {{domxref("DOMRect")}} objects.

Examples

Logging selected client rect sizes

HTML

<div></div>
<pre id="output"></pre>

CSS

div {
  height: 80px;
  width: 200px;
  background-color: blue;
}

JavaScript

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")}}