The observe()
method of the ResizeObserver
interface starts observing the specified Element
or SVGElement
.
The observe()
method of the ResizeObserver
interface starts observing the specified Element
or SVGElement
.
js
observe(target) observe(target, options)
target
A reference to an Element
or SVGElement
to be observed.
options
Optional
An options object allowing you to set options for the observation. Currently this only has one possible option that can be set:
box
Sets which box model the observer will observe changes to. Possible values are:
content-box
(the default)Size of the content area as defined in CSS.
border-box
Size of the box border area as defined in CSS.
device-pixel-content-box
The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.
None (undefined
).
None.
The following snippet is taken from the resize-observer-text.html (see source) example:
js
const resizeObserver = new ResizeObserver((entries) => { for (const 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);
An observe()
call with an options object would look like so:
js
resizeObserver.observe(divElem, { box: "border-box" });
Specification |
---|
Resize Observer # dom-resizeobserver-observe |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
observe |
64 | 79 | 69 | No | 51 | 13.1 | 64 | 64 | 79 | 47 | 13.4 | 9.0 |
options_box_parameter |
64Before version 84, thedevice-pixel-content-box value is not supported. |
79Before version 84, thedevice-pixel-content-box value is not supported. |
69Before version 93, thedevice-pixel-content-box value is not supported. |
No | 51Before version 70, thedevice-pixel-content-box value is not supported. |
13.1 | 64Before version 84, thedevice-pixel-content-box value is not supported. |
64Before version 84, thedevice-pixel-content-box value is not supported. |
79Before version 93, thedevice-pixel-content-box value is not supported. |
47Before version 60, thedevice-pixel-content-box value is not supported. |
13.4 | 9.0Before version 14.0, thedevice-pixel-content-box value is not supported. |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe