ResizeObserver：ResizeObserver() 构造函数

ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于报告 Element 的内容或边框框或 SVGElement 的边界框的更改。

语法

js
new ResizeObserver(callback)

参数

callback

每当观察到调整大小事件发生时调用的函数。该函数使用两个参数调用

entries

一个 ResizeObserverEntry 对象数组，可用于访问每次更改后元素的新尺寸。

observer

对 ResizeObserver 本身的引用，因此它肯定可以在回调函数内部访问，如果您需要它。例如，这可用于在满足特定条件时自动取消观察观察者，但如果您不需要它，则可以省略它。

回调函数通常遵循类似于以下模式的模式

js
function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

示例

以下代码片段摘自 resize-observer-text.html (查看源代码) 示例

js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      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 {
        // legacy path
        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);

规范

规范
Resize Observer
# dom-resizeobserver-resizeobserver

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。