The observe()
method of the ResizeObserver
interface starts observing the specified Element
or SVGElement
.
ResizeObserver: observe() method
Syntax
observe(target) observe(target, options)
Parameters
target
-
A reference to an
Element
orSVGElement
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.
-
Return value
None (undefined
).
Exceptions
None.
Examples
The following snippet is taken from the resize-observer-text.html (see source) example:
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:
resizeObserver.observe(divElem, { box: "border-box" });
Specifications
Specification |
---|
Resize Observer # dom-resizeobserver-observe |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | ||
observe |
64 | 79 | 69 | 51 | 13.1 | 64 | 79 | 47 | 13.4 | 9.0 | 64 | |
options_box_parameter |
84 | 84 | 69Before version 93, thedevice-pixel-content-box value is not supported. |
70 | 15.4 | 84 | 79Before version 93, thedevice-pixel-content-box value is not supported. |
60 | 15.4 | 14.0 | 84 |
© 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