ResizeObserver.unobserve()
The unobserve()
method of the
ResizeObserver
interface ends the observing of a specified
Element
or SVGElement
.
Syntax
void unobserve(target);
Parameters
target
-
A reference to an
Element
orSVGElement
to be unobserved.
Return value
Void.
Exceptions
None.
Examples
The following snippet is taken from the resize-observer-text.html (see source) example:
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if(entry.contentBoxSize) {
// Checking for chrome as using a non-standard array
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('Size changed');
});
resizeObserver.observe(divElem);
checkbox.addEventListener('change', () => {
if(checkbox.checked) {
resizeObserver.observe(divElem);
} else {
resizeObserver.unobserve(divElem);
}
});
Specifications
Specification |
---|
Resize Observer # dom-resizeobserver-unobserve |
Browser compatibility
BCD tables only load in the browser