ResizeObserverEntry: свойство contentRect

contentRect только для чтения свойство интерфейса ResizeObserverEntry возвращает объект DOMRectReadOnly, содержащий новые размеры наблюдаемого элемента, когда выполняется обратный вызов. Обратите внимание, что эта функция лучше поддерживается, чем ResizeObserverEntry.borderBoxSize или ResizeObserverEntry.contentBoxSize, но она сохранилась от более ранней реализации API Resize Observer, по-прежнему включена в спецификацию по причинам совместимости с веб-технологиями и может быть устаревшей в будущих версиях.

Объект DOMRectReadOnly, содержащий новые размеры элемента, указанного свойством target.

Если target является HTML-элементом Element, возвращаемый contentRect — это область содержимого элемента. Если target является элементом SVGElement, возвращаемый contentRect — это ограничительная рамка SVG.

Следующий фрагмент взят из примера resize-observer-text.html (посмотреть исходный код). Этот пример использует простой тест определения функции для проверки, поддерживает ли браузер новое свойство ResizeObserverEntry.contentBoxSize — если поддерживает, то он использует его для получения данных размера. Если нет, то он использует contentRect.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        entry.contentBoxSize.inlineSize / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(
        1,
        entry.contentBoxSize.inlineSize / 600,
      )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        entry.contentRect.width / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
});

resizeObserver.observe(divElem);