ResizeObserverEntry

ResizeObserverEntry インターフェイスは、コールバック ResizeObserver() コンストラクタに渡されるオブジェクトです。

ResizeObserverEntry.contentRect  読取専用

サイズ変更された要素のターゲットの DOMRectReadOnly への参照。

ResizeObserverEntry.target  読取専用

サイズ変更された Element への参照。

なし

なし

次の例では、幅の変更に応じてボックスの境界線の半径を変更します。

const resizeOserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));