当 DIV 改变尺寸时如何监听和处理？

如何监听 DIV 的尺寸改变事件？

问题

调整窗口大小时，宽高为 100% 的 DIV 中的元素可能会重新定位。尽管 jQuery 调整大小事件似乎是解决此问题的答案，但它对 DIV 元素无效。

解决方案

我们使用 MutationObserver API 来解决此问题：

步骤 1：创建 MutationObserver

创建一个 MutationObserver，并为其定义一个回调函数。此函数将在目标 DIV 发生任何更改时调用。

步骤 2：观察目标 DIV

使用 observe 方法将 MutationObserver 附加到目标 DIV，并设置 attributes 选项为 true 以监视属性更改。

步骤 3：在回调函数中检查尺寸变化

在回调函数中，检查 mutations 数组以获取属性更改信息。具体来说，检查 attributeName 是否为 style。如果已更改 style 属性，请检查新值中是否包含与尺寸相关的更改（例如，width 或 height）。

步骤 4：处理尺寸变化

如果检测到尺寸变化，则执行适当的操作，例如调整 DIV 内元素的位置或触发其他事件。

示例代码

以下代码提供了使用 MutationObserver 监听 DIV 尺寸变化的示例：

const targetDiv = document.getElementById('test_div');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const newStyle = mutation.target.style.cssText;
      if (newStyle.includes('width:') || newStyle.includes('height:')) {
        console.log('DIV 的尺寸发生了变化！');
      }
    }
  });
});

observer.observe(targetDiv, {
  attributes: true
});

注意

MutationObserver API 在较旧的浏览器中可能不受支持。建议在使用前检查浏览器兼容性。

常见问题解答

• 为什么 jQuery 调整大小事件对 DIV 无效？
  因为 DIV 元素本身不支持调整大小事件。

• MutationObserver 如何解决此问题？
  它监视目标 DIV 的属性更改，包括尺寸更改。

• 是否还有其他方法可以监听 DIV 的尺寸变化？
  其他方法包括使用 ResizeObserver API 或监听窗口调整大小事件并计算 DIV 的新尺寸。

• 如何处理检测到的尺寸变化？
  这取决于您的具体要求。您可以调整 DIV 内元素的位置、触发其他事件或执行任何您认为合适的操作。

• MutationObserver API 在哪里可用？
  MutationObserver API 在大多数现代浏览器中可用，包括 Chrome、Firefox、Safari、Edge 和 Opera。