このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

DOMRectList: length プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

lengthDOMRectList インターフェイスの読み取り専用プロパティで、リスト内の DOMRect オブジェクトの数を返します。

DOMRectList 内の DOMRect オブジェクトの数を表す正の整数。リスト内に長方形がない場合、 length0 になります。

次の例では、 <div> 要素の長方形のリストを Element.getClientRects() で取得します。次に、ページ内の別の <div> 要素内に、リスト内の長方形の数を表示します。

まず、 HTML です。

html
<div id="box" style="width: 50px; height: 20px; border: 1px solid black;"></div>
<div id="output"></div>

そして JavaScript です。

js
const box = document.getElementById("box");
const rects = box.getClientRects();
const output = document.getElementById("output");

output.textContent = `長方形の数: ${rects.length}`;

出力は次のようなります。

仕様書

Specification
Geometry Interfaces Module Level 1
# dom-domrectlist-length

ブラウザーの互換性