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)'));

仕様

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

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ResizeObserverEntryChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
borderBoxSize
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
contentBoxSize
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
contentRectChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
targetChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。