JavaScript getClientRects 为什么返回多个矩形

如果你给一个跨行的 调用 getClientRects()，返回多个矩形并不是浏览器重复计算，而是这个行内元素在不同文本行上拥有多个 CSS border box。getClientRects() 返回的是这些盒子对应的 DOMRect 集合；如果你只想拿整个元素的外接范围，则应考虑 getBoundingClientRect()。

本文只讨论行内分片、视口坐标、滚动影响、空列表与零尺寸矩形这几个边界。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects

为什么多行行内元素会得到多个矩形

一个普通块级元素通常只有一个 border box，所以它的矩形集合看起来只有一项。行内元素遇到容器宽度不足时，文字会分到多行；每一行都形成自己的布局分片，方法会为这些 CSS border box 分别返回一个 DOMRect。因此，矩形数量首先取决于布局分片，而不是 JavaScript 是否多次调用了方法。

可以用一个很小的例子观察返回集合的形状：

  这段文字会在窄容器中分成多行。

改变窗口宽度后，行数可能变化，集合长度也可能变化。不要把某一次得到的数量写死为固定值；真正稳定的判断是：多行行内内容按 border box 分片返回，单行时通常只有一个分片。

DOMRect 的坐标为什么会随滚动变化

每个返回的 DOMRect 使用像素描述矩形，top、left、right、bottom 等坐标相对于视口左上角。视口或可滚动区域滚动后，同一个元素相对于视口的位置会改变，所以再次读取时坐标可能不同；这不等于元素的文档坐标发生了变化。

坐标还可能是小数。做命中判断或绘制辅助框时，应保留原始数值，不要为了方便先强制取整。若业务需要文档坐标，可以在读取视口坐标后结合页面的滚动偏移进行换算，但要明确两者不是同一个坐标系。

方法返回的矩形描述元素自身的 border box，不会把子元素溢出到外部的部分自动并入。表格带 caption 时还有专门的返回边界规则，因此不要用一次实验结果推断所有元素的矩形组成。

视口坐标和空矩形边界要怎么判断

最容易混淆的是“空列表”和“零尺寸矩形”。对 display:none、不直接渲染的元素，以及某些不会自行渲染的元素，返回值可能是空列表，此时没有可遍历的 DOMRect。但 CSS border box 为空时，仍可能返回矩形；它的宽高可以为零，left、top、right、bottom 仍可能携带有意义的定位信息。

// 只把“没有矩形”和“有矩形但尺寸为零”分开处理
function describeClientRects(element) {
  const rects = [...element.getClientRects()];

  if (rects.length === 0) {
    // 可能是 display:none 或元素没有直接渲染结果
    return { kind: 'empty-list', rects: [] };
  }

  return {
    kind: 'rects',
    rects: rects.map((rect) => ({
      // 保留小数坐标，避免把布局信息提前丢失
      left: rect.left,
      top: rect.top,
      width: rect.width,
      height: rect.height,
      isEmpty: rect.width === 0 && rect.height === 0
    }))
  };
}

这个判断只描述几何返回值，不替代业务上的可见性判断。想判断元素是否真正可见，还需要结合 CSS、布局和渲染语义；不要仅凭矩形数量下结论。

什么时候改用 getBoundingClientRect

如果目标是给跨行文本逐行画高亮、定位批注气泡或计算每个布局分片，就遍历 getClientRects() 的集合。如果目标只是得到元素整体的外接范围、判断一个区域是否与元素相交，getBoundingClientRect() 更直接。它返回一个整体矩形，通常不会告诉你每一行分别占据了什么区域。

常见误区有三个：把多矩形当成异常、把视口坐标误当文档坐标、把零尺寸矩形误判为空列表。围绕 border box、坐标参考系和返回集合这三个概念分别判断，问题就能拆开。

常见问题

为什么同一个 span 有时只有一个矩形？如果当前宽度足以让文本保持一行，或者元素本身只形成一个布局分片，返回集合通常只有一项。

滚动页面后应该重新调用吗？如果你需要最新的视口坐标，应在滚动后重新读取；之前保存的坐标仍是读取当时的视口位置。

空列表能用 width 和 height 判断吗？不能。空列表没有可读取的矩形；零尺寸矩形才是“有矩形但尺寸为零”的另一种情况。