我有下面的代码片段 . 如果按“运行代码段”，则会看到以下内容
1 - p.getClientRects（） . length 2 - span.getClientRects（） . length
但是，如果您先按“展开代码段”，然后按“运行代码段”，则会看到一些不同的结果：
1 - p.getClientRects（） . length 1 - span.getClientRects（） . length
我只想了解Element.getClientRects（）方法 . 但是这种情况让我崩溃了 . 你能解释为什么会产生不同的结果吗？
我的浏览器是：Chrome版本67.0.3396.99（官方版本）（64位）
var p = document.querySelector('p');
var span = document.querySelector('span');
console.log(p.getClientRects().length, "- p.getClientRects().length");
console.log(span.getClientRects().length, "- span.getClientRects().length");
p {
border: 1px solid green;
}
span {
border: 1px solid red;
}
<p>
This is a paragraph with
<span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span>
</p>
1 回答
未展开，文本换行，因此您有两个单独的矩形：
扩展后，文本全部适合一行，因此您只有一个矩形：