Range: getClientRects() メソッド

Range.getClientRects() メソッドは、範囲が占める画面の領域を表す DOMRect オブジェクトのリストを返します。これは、 Element.getClientRects() を呼び出した結果を集約して作成されます。

構文

js
getClientRects()

引数

None.

返値

反復可能な DOMRect オブジェクトの並びです。

例

選択されたクライアント矩形のサイズのログ記録

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}`;
}

結果

仕様書

Specification
CSSOM View Module
# dom-range-getclientrects

ブラウザーの互換性

BCD tables only load in the browser

関連情報