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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
unobserve |
64 |
79 |
69 |
No |
51 |
13.1 |
64 |
64 |
79 |
47 |
13.4 |
9.0 |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/unobserve