Когда Element.getClientRects () возвращает коллекцию из нескольких объектов?

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 (как inline-элементы), тогда 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.