DOMRectList: length 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

DOMRectList 接口的只读 length 属性返回列表中 DOMRect 对象的数量。

一个正整数,表示 DOMRectListDOMRect 对象的数量。如果列表中没有矩形,则 length0

示例

在以下示例中,我们使用 Element.getClientRects() 获取 <div> 元素的矩形列表。然后,我们在页面上的另一个 <div> 元素中显示列表中的矩形数量。

首先,HTML 代码

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

现在是 JavaScript 代码

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

output.textContent = `Number of rectangles: ${rects.length}`;

输出如下所示

规范

规范
Geometry Interfaces Module Level 1
# dom-domrectlist-length

浏览器兼容性