Диапазон: метод getClientRects()

Базовая линия Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Метод Range.getClientRects() возвращает список объектов DOMRect, представляющих область экрана, занимаемую диапазоном. Он создается путем агрегирования результатов вызовов Element.getClientRects() для всех элементов в диапазоне.

Синтаксис

getClientRects()

Параметры

Нет.

Возвращаемое значение

Итерируемая последовательность объектов итерируемых DOMRect.

Примеры

Вывод размеров выбранных client rect

HTML

<div></div>
<pre id="output"></pre>

CSS

div {
  height: 80px;
  width: 200px;
  background-color: blue;
}

JavaScript

const range = document.createRange();
range.selectNode(document.querySelector("div"));
rectList = range.getClientRects();

const output = document.querySelector("#output");
for (const rect of rectList) {
  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}

Результат

Спецификации

Спецификация
Модуль CSSOM View # dom-range-getclientrects

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`getClientRects`	4	12	4	≤12.1	5	18	4	≤12.1	4	1.0	≤37

См. также

Range

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects