Range: getClientRects() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
Range.getClientRects() メソッドは、範囲が占める画面の領域を表す DOMRect オブジェクトのリストを返します。これは、 Element.getClientRects() を呼び出した結果を集約して作成されます。
構文
js
getClientRects()
引数
None.
返値
例
選択されたクライアント矩形のサイズのログ記録
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}`;
}
結果
仕様書
| 仕様書 |
|---|
| CSSOM View Module # dom-range-getclientrects |