Range: getClientRects() メソッド
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.
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}`;
}
結果
仕様書
Specification |
---|
CSSOM View Module # dom-range-getclientrects |
ブラウザーの互換性
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.