ResizeObserverEntry
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
ResizeObserverEntry
インターフェイスは、コールバック ResizeObserver()
コンストラクタに渡されるオブジェクトです。
プロパティ
ResizeObserverEntry.contentRect
Experimental 読取専用- サイズ変更された要素のターゲットの
DOMRectReadOnly
への参照。 ResizeObserverEntry.target
(en-US) Experimental 読取専用- サイズ変更された
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