ResizeObserverEntry

Experimental

これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

プロパティ

ResizeObserverEntry.contentRect 読取専用: サイズ変更された要素のターゲットの DOMRectReadOnly (en-US) への参照。
ResizeObserverEntry.target (en-US) 読取専用: サイズ変更された 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)'));

仕様

仕様書	ステータス	コメント
Resize Observer ResizeObserverEntry の定義	編集者草案	初期定義

ブラウザの互換性

BCD tables only load in the browser