前面我们介绍了 DOM元素 变化的 observer——MutationObserver，今天我们来介绍一下另一个 observer——ResizeObserver。

ResizeObserver口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距 padding。

constructor

var ResizeObserver = new ResizeObserver(callback)

语法通 MutationObserver 一样，构造函数接收一个回调函数，当监听的元素发生大小变化就会触发这个回调函数。

回调函数接收两个参数，这个参数表示了元素变化后的一些信息

interface ResizeObserverCallback {
    (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
}

interface ResizeObserverEntry {
    readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
    readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
    readonly contentRect: DOMRectReadOnly;
    readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
    readonly target: Element;
}

其中ResizeObserverEntry之中最主要的属性是：

  • borderBoxSize：一个数组，其中包含具有观察到的元素的新边框框大小的对象。该数组是支持具有多个片段的元素所必需的，这些片段发生在多列场景中；

  • contentBoxSize：和 borderBoxSize 的区别是这里是内容；

  • contentRect：对改变尺寸大小的元素的 DOMRectReadOnly引用（包含 x,y,width,height,top,right,bottom,left 属性）

  • devicePixelContentBoxSize：一个数组，其中包含具有以设备像素为单位的观察元素的新大小的对象。

  • target：当前改变尺寸大小的元素的 Element 引用

下面的示例都基于这个 DOM结构

<body>
  <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
  <div id="box2" style="width: 100px; height: 100px; background-color: red;"></div>
</body>

observe

监听元素

resizeObserver.observe(target[, options]);

  • target：要被监听的DOM元素
  • options：可选，目前只支持一个选项
    • box：设置观察者将以哪种盒子模型来观察变动，支持的属性值有content-box (默认值)，border-box，和 device-pixel-content-box。
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry);
  }
});

const box = document.getElementById('box')

observer.observe(box)

当使用 js 修改 DOM 的大小时

box.style.width='130px'

image-20220726171639236

unobserve

取消对目标元素的监听

resizeObserver.unobserve(target);

  • target：取消监听的Element 或 SVGElement 的引用。
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry);
  }
});

const box = document.getElementById('box')

observer.observe(box)
box.style.width='130px'

observer.unobserve(box)
box.style.width='100px'

image-20220726175547570

disconnect

resizeObserver.disconnect();

disconnect用于取消监听这个监听器上所有监听的元素。

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry);
  }
});

const box = document.getElementById('box')
const box2 = document.getElementById('box2')

observer.observe(box)
observer.observe(box2)

box.style.width='130px'
box2.style.width='130px'

observer.disconnect()

box.style.width='100px'
box2.style.width='100px'

image-20220726180008989

赏

前端小白