ResizeObserverEntry

Интерфейс ResizeObserverEntry представляет собой объект, передаваемый в функцию обратного вызова конструктора ResizeObserver(), который позволяет получить новые размеры наблюдаемого Element или SVGElement.

ResizeObserverEntry.borderBoxSize Только для чтения

Массив объектов, содержащих новые размеры рамки наблюдаемого элемента при выполнении обратного вызова.

ResizeObserverEntry.contentBoxSize Только для чтения

Массив объектов, содержащих новые размеры области содержимого наблюдаемого элемента при выполнении обратного вызова.

ResizeObserverEntry.devicePixelContentBoxSize Только для чтения

Массив объектов, содержащих новые размеры области содержимого наблюдаемого элемента в пикселях устройства при выполнении обратного вызова.

ResizeObserverEntry.contentRect Только для чтения

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

ResizeObserverEntry.target Только для чтения

Ссылка на наблюдаемый Element или SVGElement.

Нет.

Следующий фрагмент взят из примера resize-observer-text.html (посмотреть исходный код).

Обратите внимание, что код охватывает три различных случая совместимости:

• Некоторые старые браузеры могут поддерживать contentRect , но не contentBoxSize.
• Старые версии Firefox поддерживают contentBoxSize, но неправильно реализовали его как один объект вместо массива.
• Современные браузеры поддерживают contentBoxSize как массив объектов, что позволяет им сообщать о размерах блоков для фрагментированных элементов (например, в многоколоночном сценарии).

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
      } else {
        // ...but old versions of Firefox treat it as a single item
        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";
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);