ResizeObserver

ResizeObserver interface reports changes to the dimensions of an Element 's content or border box, or the bounding box of an SVGElement .

注意 : 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.

ResizeObserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a callback function. It does this by only processing elements deeper in the DOM in subsequent frames. Implementations should, if they follow the specification, invoke resize events before paint and after layout.

构造函数

ResizeObserver()
Creates and returns a new ResizeObserver 对象。

特性

None.

方法

ResizeObserver.disconnect()
Unobserves all observed Element targets of a particular observer.
ResizeObserver.observe()
Initiates the observing of a specified Element .
ResizeObserver.unobserve()
Ends the observing of a specified Element .

范例

In the resize-observer-text.html ( see source ) example, we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. This shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport.

We also provide a checkbox to turn the observer off and on. If it is turned off, the text will not change in response to the <div> 's width changing.

The JavaScript looks like so:

const h1Elem = document.querySelector('h1');
const pElem = document.querySelector('p');
const divElem = document.querySelector('body > div');
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');
divElem.style.width = '600px';
slider.addEventListener('input', () => {
  divElem.style.width = slider.value + 'px';
})
const resizeObserver = new ResizeObserver(entries => {
  for (const 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);
checkbox.addEventListener('change', () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});
					

规范

规范 状态 Comment
重置尺寸观测器
The definition of 'ResizeObserver' 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
ResizeObserver Chrome 64 Edge 79 Firefox 69 IE No Opera 51 Safari 13.1 WebView Android 64 Chrome Android 64 Firefox Android No Opera Android 47 Safari iOS 13.4 Samsung Internet Android 9.0
ResizeObserver() 构造函数 Chrome 64 Edge 79 Firefox 69 IE No Opera 51 Safari 13.1 WebView Android 64 Chrome Android 64 Firefox Android No Opera Android 47 Safari iOS 13.4 Samsung Internet Android 9.0
disconnect Chrome 64 Edge 79 Firefox 69 IE No Opera 51 Safari 13.1 WebView Android 64 Chrome Android 64 Firefox Android No Opera Android 47 Safari iOS 13.4 Samsung Internet Android 9.0
observe Chrome 64 Edge 79 Firefox 69 IE No Opera 51 Safari 13.1 WebView Android 64 Chrome Android 64 Firefox Android No Opera Android 47 Safari iOS 13.4 Samsung Internet Android 9.0
unobserve Chrome 64 Edge 79 Firefox 69 IE No Opera 51 Safari 13.1 WebView Android 64 Chrome Android 64 Firefox Android No Opera Android 47 Safari iOS 13.4 Samsung Internet Android 9.0

图例

完整支持
完整支持
不支持
不支持

另请参阅