The ResizeObserverSize
interface of the Resize Observer API
is used by the ResizeObserverEntry
interface to access the box sizing properties of the element being observed.
Note: In multi-column layout, which is a fragmented context, the sizing returned by ResizeObserverSize
will be the size of the first column.
Instance properties
ResizeObserverSize.blockSize
Read only
-
The length of the observed element's border box in the block dimension. For boxes with a horizontal writing-mode
, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width.
ResizeObserverSize.inlineSize
Read only
-
The length of the observed element's border box in the inline dimension. For boxes with a horizontal writing-mode
, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height.
Examples
In this example the ResizeObserverEntry.contentBoxSize
property returns a ResizeObserverSize
object. This is an array containing the sizing information for the content box of the observed element.
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentBoxSize[0]);
}
});
resizeObserver.observe(divElem);
Specifications
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 |
ResizeObserverSize |
84 |
84 |
69 |
No |
70 |
15.4 |
84 |
84 |
79 |
60 |
15.4 |
14.0 |
blockSize |
84 |
84 |
69 |
No |
70 |
15.4 |
84 |
84 |
79 |
60 |
15.4 |
14.0 |
inlineSize |
84 |
84 |
69 |
No |
70 |
15.4 |
84 |
84 |
79 |
60 |
15.4 |
14.0 |