Question

每次调用Element.getClientRects()时，它只会返回一个DOMRect对象的集合。

Element.getClientRects()何时返回多个DOMRect对象的集合？

function handleClick() {
  console.log(event.target.getClientRects())
}

<ul 
  style="border: 1px solid black;" 
  onclick="handleClick()"
>
    <li>Click the text to see in console</li>
</ul>

Answer 1

Element.getClientRects()方法的返回值是DOMRect个对象的集合，每个对象与一个元素周围的一个CSS border-box相关联。

当元素具有多个 border-boxes（如内联元素）时，Element.getClientRects()返回多个DOMRect对象。一个例子：

let p = document.querySelector('p');
let span = document.querySelector('span');

console.log(p.getClientRects().length);
console.log(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>

也，返回值取决于屏幕分辨率。尺寸越小，CSS border-boxes的数目越小。

Element.getClientRects（）何时返回多个对象的集合？

1 个答案: