ResizeObserver
コンストラクターは、 Element
のコンテンツまたは境界の矩形、または SVGElement
のバウンディングボックスに対する変更を監視する新しい ResizeObserver
オブジェクトを作成します。
構文
var ResizeObserver = new ResizeObserver(callback)
引数
callback
- 監視中のものに寸法の変更が発生するたびに呼び出される関数です。関数は2つの引数で呼び出されます。
entries
ResizeObserverEntry
オブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。observer
ResizeObserver
自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。
コールバックは一般に、次のパターンに従います。
function(entries, observer) { for (let entry of entries) { // Do something to each entry // and possibly something to the observer itself } }
例
次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if(entry.contentBoxSize) {
h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
} else {
h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
}
}
});
resizeObserver.observe(divElem);
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Resize Observer ResizeObserver の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser