ResizeObserverEntry

Experimental

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

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

プロパティ

ResizeObserverEntry.contentRect  これは実験段階の API です。製品内のコードで使用しないようご注意ください。 読取専用
サイズ変更された要素のターゲットの DOMRectReadOnly (en-US) への参照。
ResizeObserverEntry.target (en-US)  これは実験段階の API です。製品内のコードで使用しないようご注意ください。 読取専用
サイズ変更された 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