ResizeObserverEntry: свойство borderBoxSize

Базовая Широко доступна

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

Чтение только свойство borderBoxSize интерфейса ResizeObserverEntry возвращает массив, содержащий новый размер border box наблюдаемого элемента, когда вызывается обработчик.

Значение

Массив, содержащий объекты с новым размером border box наблюдаемого элемента. Массив необходим для поддержки элементов, имеющих несколько фрагментов, что встречается в многоколоночных сценариях. Каждый объект в массиве содержит два свойства:

blockSize: Длина border box наблюдаемого элемента в блочном измерении. Для блоков с горизонтальной writing-mode это вертикальное измерение (высота); если режим записи вертикальный, это горизонтальное измерение (ширина).
inlineSize: Длина border box наблюдаемого элемента в линейном измерении. Для блоков с горизонтальной writing-mode это горизонтальное измерение (ширина); если режим записи вертикальный, это вертикальное измерение (высота).

Примечание: Для более подробного объяснения режимов записи и блочных и линейных измерений прочитайте Обработка различных направлений текста.

Примеры

const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize?.length > 0) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

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

Спецификация
Resize Observer # dom-resizeobserverentry-borderboxsize

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`borderBoxSize`	84	84	92 69–92 Реализовано как один объект, представляющий размер области содержимого, а не массив объектов размера области содержимого.	70	15.4	84	92 79–92 Реализовано как один объект, представляющий размер области содержимого, а не массив объектов размера области содержимого.	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/ResizeObserverEntry/borderBoxSize