ResizeObserverEntry

ResizeObserverEntry interface represents the object passed to the ResizeObserver() constructor's callback function, which allows you to access the new dimensions of the Element or SVGElement being observed.

特性

ResizeObserverEntry.borderBoxSize 只读
An object containing the new border box size of the observed element when the callback is run.
ResizeObserverEntry.contentBoxSize 只读
An object containing the new content box size of the observed element when the callback is run.
ResizeObserverEntry.contentRect 只读
A DOMRectReadOnly object containing the new size of the observed element when the callback is run. Note that this is better supported than the above two properties, but it is left over from an earlier implementation of the Resize Observer API, is still included in the spec for web compat reasons, and may be deprecated in future versions.
ResizeObserverEntry.target 只读
A reference to the Element or SVGElement being observed.

注意 : The content box is the box in which content can be placed, meaning the border box minus the padding and border width. The border box encompasses the content, padding, and border. See The box model for further explanation.

方法

None.

范例

The following snippet is taken from the resize-observer-text.html ( see source ) example. This uses a simple feature detection test to see if the browser supports the newer contentBoxSize property — if so, it uses that to get the sizing data it needs. If not, it uses the older contentRect 特性。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      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';
    }
  }
});
resizeObserver.observe(divElem);
					

规范

规范 状态 Comment
重置尺寸观测器
The definition of 'ResizeObserverEntry' in that specification.
编者草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
ResizeObserverEntry Chrome 64 Edge 79 Firefox 69 IE No Opera Yes Safari No WebView Android 64 Chrome Android 64 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 9.0
borderBoxSize
Chrome No Edge No Firefox 69 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No
contentBoxSize
Chrome No Edge No Firefox 69 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No
contentRect Chrome 64 Edge 79 Firefox 69 IE No Opera Yes Safari No WebView Android 64 Chrome Android 64 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 9.0
target Chrome 64 Edge 79 Firefox 69 IE No Opera Yes Safari No WebView Android 64 Chrome Android 64 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 9.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。