ResizeObserver: observe() 方法

observe() 方法是 ResizeObserver 接口的一部分，它开始观察指定的 Element 或 SVGElement。

语法

observe(target)
observe(target, options)

参数

target

对要观察的 Element 或 SVGElement 的引用。

options 可选

一个选项对象，允许你为观察设置选项。目前只有一个可以设置的选项

box

设置观察者将观察更改的哪个盒子模型。可能的值是

content-box (默认): CSS 中定义的内容区域大小。
border-box: CSS 中定义的盒子边框区域大小。
device-pixel-content-box: CSS 中定义的内容区域大小，以设备像素为单位，在应用元素或其祖先上的任何 CSS 变换之前。

返回值

无 (undefined).

异常

无。

示例

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

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      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 {
        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);

带有选项对象的 observe() 调用将如下所示

resizeObserver.observe(divElem, { box: "border-box" });

规范

规范
Resize Observer # dom-resizeobserver-observe

浏览器兼容性

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