ResizeObserver: unobserve() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
unobserve()
は ResizeObserver
インターフェイスのメソッドで、指定された Element
または SVGElement
の監視を終了します。
構文
js
unobserve(target)
引数
target
-
監視を終了する
Element
またはSVGElement
への参照。
返値
なし (undefined
)。
例外
なし。
例
次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。
js
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
// クロームが標準外の配列を使用しているかどうかのチェック
if (entry.contentBoxSize[0]) {
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentBoxSize[0].inlineSize / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(
1,
entry.contentBoxSize[0].inlineSize / 600,
)}rem`;
} else {
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`;
}
}
console.log("サイズが変更されました");
});
resizeObserver.observe(divElem);
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
resizeObserver.observe(divElem);
} else {
resizeObserver.unobserve(divElem);
}
});
仕様書
Specification |
---|
Resize Observer # dom-resizeobserver-unobserve |
ブラウザーの互換性
BCD tables only load in the browser