如何检测DIV的尺寸变化

检测 DIV 尺寸变化的方法有很多，本文将介绍其中两种常用的方法。

方法一：利用 ResizeObserver 监听

ResizeObserver 是现代浏览器提供的一种监听元素尺寸变化的 API，支持监听多个 DOM 元素的尺寸变化。你只需要实例化一个 ResizeObserver，然后调用 observe() 方法传入需要监听的 DOM 元素，当元素的尺寸发生变化时，就会触发回调函数。

// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const {target, contentRect} = entry;
    console.log(`元素 ${target} 的尺寸变化：${contentRect.width} x ${contentRect.height}`);
  }
});

// 监听元素尺寸变化
resizeObserver.observe(document.querySelector('#myDiv'));

在上面的示例代码中，我们创建了一个 ResizeObserver 实例，并利用 observe() 方法监听了一个 ID 为 myDiv 的 DIV 元素的尺寸变化。当该 DIV 元素的尺寸发生变化时，就会触发回调函数，并在控制台输出新的尺寸信息。

需要注意的是，ResizeObserver API 目前还不兼容 IE 浏览器和移动端 Safari 浏览器。另外，对于非 root 元素，可能需要手动设置 CSS 属性 resize: both 或 overflow: auto 才能正确触发尺寸变化事件。

方法二：利用 MutationObserver 监听

MutationObserver 是另一种常用的监听元素变化的 API，相比 ResizeObserver 更为通用，也可以监听元素的尺寸变化。使用该 API，我们可以监听 DOM 元素的子节点、属性、文本内容等变化，并在回调函数中进行处理。

对于 DIV 元素的尺寸变化，我们可以通过监听其子节点的变化来判断。下面是一段示例代码：

// 创建 MutationObserver 实例
const mutationObserver = new MutationObserver(() => {
  const width = myDiv.clientWidth;
  const height = myDiv.clientHeight;
  console.log(`元素尺寸变化：${width} x ${height}`);
});

// 监听 DIV 子节点的变化
const myDiv = document.querySelector('#myDiv');
mutationObserver.observe(myDiv, { childList: true, subtree: true });

在上面的示例代码中，我们创建了一个 MutationObserver 实例，并利用 observe() 方法监听了一个 ID 为 myDiv 的 DIV 元素子节点的变化。当该 DIV 元素的子节点发生变化时，就会触发回调函数，并在控制台输出新的尺寸信息。

需要注意的是，与 ResizeObserver 不同，MutationObserver 不会自动监听元素自身尺寸的变化，而是需要手动监听元素子节点的变化。此外，MutationObserver 监听的变化类型较多，如果只需要监听尺寸变化，需要对回调函数进行一定的处理和筛选。