ResizeObserver - 用于观察元素的边框变化

注意：内容盒子是可以放置内容的盒子，表示边框盒子减去填充（padding）和边框宽度。边框盒子（border box）包含内容，填充（padding）和边框。有关更多说明，请参见盒子模型。

ResizeObserver 避免了在通过回调函数调整大小时经常创建的无限回调循环和循环依赖。它仅通过在后续帧中处理 DOM 中更深的元素来做到这一点。如果实现遵循规范，则它们应该在绘制之前和布局之后调用 resize 事件。

构造函数

ResizeObserver()

创建并返回一个新的 ResizeObserver 对象。

属性

无。

方法

ResizeObserver.disconnect()

取消观察特定观察者的所有观察到的 Element 目标。

ResizeObserver.observe()

启动对指定 Element 的观察。

ResizeObserver.unobserve()

结束对指定的 Element 的观察。

实例

在 resize-observer-text.html（请参阅源代码）实例中，当滑块的值发生了变化，会更改 <div> 的宽度，我们使用 ResizeObserver 来观察 <div> 从而更改标题和段落的 font-size。这表明您可以响应元素大小的更改，即使它们与视口无关。

我们还提供了一个复选框，用于关闭和打开观察器。如果将其关闭，则文本不会响应 <div> 的宽度变化。

JavaScript 看起来像这样：

if(ResizeObserver) {
  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 (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);

  checkbox.addEventListener('change', () => {
    if(checkbox.checked) {
      resizeObserver.observe(divElem);
    } else {
      resizeObserver.unobserve(divElem);
    }
  });
}

规范

规范	状态	备注
Resize Observer ResizeObserver 的定义	编者的草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 盒模型
• PerformanceObserver
• IntersectionObserver (Intersection Observer API 的一部分)