ResizeObserverEntry: свойство target

Чтение-только свойство target интерфейса ResizeObserverEntry возвращает ссылку на Element или SVGElement, которые наблюдаются.

Элемент Element или SVGElement, который наблюдается.

Следующий фрагмент взят из примера resize-observer-border-radius.html (посмотреть исходный код) . В этом примере показана зелёная рамка, размер которой задан в процентах от размера viewport. При изменении размера viewport, скругленные углы рамки изменяются пропорционально размеру рамки. Мы можем просто реализовать это с помощью border-radius с процентами, но это быстро приводит к уродливым эллиптическим углам; это решение обеспечивает красивые квадратные углы, которые масштабируются вместе с размером рамки.

Чтобы получить ссылку на наблюдаемый элемент и обновить его значение border-radius после каждого изменения, мы используем свойство target каждого элемента — entry.target.style.borderRadius.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentBoxSize.inlineSize / 10 +
          entry.contentBoxSize.blockSize / 10,
      )}px`;
    } else {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentRect.width / 10 + entry.contentRect.height / 10,
      )}px`;
    }
  }
});

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