使用 ResizeObserver监听多个 DOM 元素

可以使用 ResizeObserver 的实例来监听多个 DOM 元素的变化。首先，创建一个 ResizeObserver 的实例，然后使用该实例的observe()方法来观察每个需要监听的 DOM 元素。

下面是一个示例代码，可以监听多个 DOM 元素的变化：

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const target = entry.target;
    const width = target.clientWidth;
    const height = target.clientHeight;
    console.log(`${target.id} resized to ${width}x${height}`);
  }
});

// 监听多个 DOM 元素
const elements = document.querySelectorAll('.resize');
elements.forEach(element => {
  observer.observe(element);
});

在这个示例中，我们首先创建了一个 ResizeObserver 的实例，然后使用该实例的observe()方法来观察多个需要监听的 DOM 元素。每当一个元素的大小发生变化时，ResizeObserver 的回调函数就会被调用，我们可以在其中获取元素的新宽度和高度，并进行相应的处理。