ResizeObserver: метод observe()

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

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

Метод observe() интерфейса ResizeObserver начинает наблюдение за указанным элементом Element или SVGElement.

Синтаксис

observe(target)
observe(target, options)

Параметры

target

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

options Необязательный

Объект опций, позволяющий настроить наблюдение. В настоящее время доступна только одна опция:

box

Устанавливает, за какой частью модели бокса будет наблюдать наблюдатель. Возможные значения:

content-box (по умолчанию): Размер области содержимого, определённый в CSS.
border-box: Размер области границы элемента, определённый в CSS.
device-pixel-content-box: Размер области содержимого, определённый в CSS, в устройствах пикселях, до применения любых CSS-трансформаций к элементу или его предкам.

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

None (undefined).

Исключения

Нет.

Примеры

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

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Checking for chrome as using a non-standard 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 {
        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);

Вызов observe() с объектом опций будет выглядеть так:

resizeObserver.observe(divElem, { box: "border-box" });

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

Спецификация
Resize Observer # dom-resizeobserver-observe

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`observe`	64	79	69	51	13.1	64	79	47	13.4	9.0	64
`options_box_parameter`	84	84	69 До версии 93, значение `device-pixel-content-box` не поддерживается.	70	15.4	84	79 До версии 93, значение `device-pixel-content-box` не поддерживается.	60	15.4	14.0	84

© 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/ResizeObserver/observe