范围：getClientRects() 方法

Range.getClientRects() 方法返回一个 DOMRect 对象列表，表示范围占据的屏幕区域。这是通过聚合对范围内所有元素调用 Element.getClientRects() 的结果而创建的。

语法

getClientRects()

参数

无。

返回值

一个可迭代的 DOMRect 对象序列。

示例

记录选定的客户端矩形大小

HTML

html

<div></div>
<pre id="output"></pre>

CSS

css

div {
  height: 80px;
  width: 200px;
  background-color: blue;
}

JavaScript

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 视图模块 # dom-range-getclientrects

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

范围