Range：getClientRects() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

语法

getClientRects()

参数

无。

返回值

一个 iterable 序列的 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

浏览器兼容性

另见

Range

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2024 年 3 月 7 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题