getclientrects 返回空数组的常见原因是元素未参与布局，如 display: none、父元素 overflow: hidden 裁剪、display: contents 容器中，或纯空白字符未触发布局；需确保元素已挂载且 display 不为 none。
getClientRects 返回空数组的常见原因
当对行内元素（如 <span></span>、<a></a>）调用 getClientRects() 却拿到空数组，大概率不是代码写错了，而是该元素尚未参与布局——比如它被 display: none、父元素 overflow: hidden 且内容被裁剪、或元素位于未渲染的 display: contents 容器中。另外，如果行内元素完全被换行符或空格“撑开”但无实际渲染内容（例如纯空白字符 + white-space: pre 但未触发布局），也可能返回空。
- 确保元素已挂载到 DOM 且计算样式中
display不为none - 避免在
document.body尚未 ready 时调用（比如脚本放在里且没加defer或监听DOMContentLoaded） - 检查祖先元素是否有
visibility: hidden——这不会阻止布局，但display: none会彻底移出布局流
行内元素跨行时 getClientRects 的返回结构
getClientRects() 对跨多行的行内元素（如长文本 <span></span> 在窄容器中自动折行），会为**每一行上该元素占据的连续矩形区域**返回一个 DOMRect。注意：不是按字、不是按词，而是按浏览器实际绘制的“行盒（line box）”切分。如果某行中该 <span></span> 被其他元素打断（比如中间插了个 <strong></strong>），那么这一行可能返回多个不连续的 DOMRect（每个属于该行内该元素的连续片段）。
- 返回的是
DOMRectList，可用Array.from(rects)转成数组处理 - 每个
DOMRect的top/bottom是相对于视口的，不是相对于父元素 - 若元素部分被
overflow: hidden父容器裁剪，getClientRects()仍返回完整行盒区域，而getBoundingClientRect()返回的是裁剪后的整体包围盒
与 getBoundingClientRect 的关键区别（尤其对 inline 元素）
对行内元素，getBoundingClientRect() 只返回一个紧密包裹整个元素所有行片段的最小矩形（即所有 getClientRects() 结果的 union），而 getClientRects() 才能告诉你它到底在哪几行、每行占多宽多高。这意味着：做光标定位、文字高亮、行内工具提示（tooltip 跟随某一行）时，必须用 getClientRects()；仅需判断是否在视口内，用 getBoundingClientRect() 更轻量。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
getClientRects()在元素无渲染尺寸时返回空列表；getBoundingClientRect()总返回一个DOMRect（哪怕宽高为 0） - 动态修改文本后，需重新调用 —— 它不自动响应 layout change
- 在 zoom ≠ 1 或使用 CSS transforms 的页面中，两者结果都已自动适配缩放/变换，无需手动校正
实际用例：获取最后一行的 rect 并定位 tooltip
假设你有个 <span class="truncated"></span> 显示省略号，hover 时要在最后一行末尾显示 tooltip。不能只靠 getBoundingClientRect()，因为它的 right 是整个 span 最右端，可能远超最后一行实际结束位置。
const span = document.querySelector('.truncated');
const rects = span.getClientRects();
if (rects.length > 0) {
const lastRect = rects[rects.length - 1];
// tooltip.style.left = `${lastRect.right}px`;
// tooltip.style.top = `${lastRect.bottom}px`;
}
注意：如果 rects 长度为 0，说明元素不可见或未布局，此时不应强行显示 tooltip；如果长度为 1，说明没折行，lastRect 就是唯一一行。
容易忽略的是字体度量影响：同一段文本在不同字体、字号、line-height 下，getClientRects() 返回的 height 和 top 间距会不同，不要硬编码偏移值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
