javascript 如何监听 div 宽高改变

在JavaScript中，监听div宽高的改变可以通过几种方法实现，其中包括使用ResizeObserver、MutationObserver与监听窗口resize事件。这些方法提供了不同的优势，并可根据具体需求和场景进行选择。我们将重点讲解使用ResizeObserver这一方法，因为它提供了一种高效且直接的方式来监听元素的尺寸变化。

一、RESIZEOBSERVER – 直接监听元素

ResizeObserver是一个用于监听HTMLElements尺寸变化的API。创建一个ResizeObserver实例，并将一个回调函数作为参数传入，这个回调函数会在被观察元素的尺寸变化时被调用。

使用ResizeObserver的步骤包括：初始化ResizeObserver实例、指定回调函数以及将所需监听的元素与observer关联起来。 这种方法的主要优势是它能够直接对特定元素的大小变化进行监听，不依赖于全局的窗口变化，因此在处理局部UI组件时特别有用。

创建ResizeObserver实例并进行监听的代码示例如下：

// 初始化ResizeObserver实例并传入回调函数

let resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 处理每一个被观察元素的尺寸变化
    console.log('Element:', entry.target);
    console.log(`Element's new width: ${entry.contentRect.width}`);
    console.log(`Element's new height: ${entry.contentRect.height}`);
  }
});
// 选择需要监听的元素
let div = document.querySelector('div');
// 将observer与目标元素关联起来
resizeObserver.observe(div);

二、MUTATIONOBSERVER – 监听DOM变更

虽然MutationObserver主要用于监听DOM树的变化（如节点的增加、删除或属性的变更），它也可间接用于监听div的宽高改变，特别是当尺寸变化是由于DOM变化引起的。

要通过MutationObserver监听宽高变化，需要配置监听属性变化，并且适用场景是尺寸变化与特定DOM属性（如style）的变化相关联。

配置MutationObserver和观察宽高变化相关的代码大致如下：

// 初始化MutationObserver实例并传入回调函数

let mutationObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      console.log('Style attribute changed');
      let target = mutation.target;
      console.log(`New width: ${target.style.width}, New height: ${target.style.height}`);
    }
  });
});
// 选择需要监听的元素
let div = document.querySelector('div');
// 配置observer选项
let config = {
  attributes: true, // 监听属性的变化
  attributeFilter: ['style'] // 仅监听style属性的变化
};
// 启动监听
mutationObserver.observe(div, config);

三、监听WINDOW RESIZE 事件

对于那些间接导致div宽高改变的场景，比如浏览器窗口大小的调整，可以监听window的resize事件来实现间接监测。这种方法适用于当div尺寸的变化是响应全局环境变化时。

监听窗口resize事件与检查特定元素的宽高变化可以联合使用，以对窗口大小的变化做出响应。

关于如何实现的代码示例：

window.addEventListener('resize', () => {

  let div = document.querySelector('div');
  console.log(`Resized div's width: ${div.offsetWidth}`);
  console.log(`Resized div's height: ${div.offsetHeight}`);
});

四、结合使用方法

虽然上述三种方法各有特点和适用场景，但在实际开发中通常需要根据应用的具体要求来选择最合适的监听方法，有时候也会结合使用这几种方法，以达到最佳的监听效果和性能表现。例如，可以首先使用ResizeObserver来监测目标元素的尺寸变化，同时监听窗口的resize事件来处理那些由于全局环境变化而间接影响元素尺寸的情况。如此一来，不仅可以精确地获取元素尺寸的变化，还可以预防由于外部因素引起的变化，确保应用界面的正确性和用户体验。

综上，虽然JavaScript提供了多种方式来监听div宽高的改变，但选择最合适的方法需要考虑到具体场景、性能要求以及兼容性问题。ResizeObserver由于其直接和高效的特性成为了首选方法，但在特定情况下结合使用其他方法也能达到优良的效果。

相关问答FAQs：

如何在 JavaScript 中监听 div 元素的宽度和高度改变？

1. 如何使用 JavaScript 监听 div 元素的宽度改变？

要监听 div 元素的宽度改变，可以使用 ResizeObserver 对象。首先，通过 querySelector 或 getElementById 方法获取到目标 div 元素。然后，创建一个新的 ResizeObserver 对象，并使用 observe 方法将目标元素传递进去。最后，在回调函数中处理宽度改变的事件。这样，当目标 div 元素的宽度发生变化时，回调函数就会被触发。

2. 如何使用 JavaScript 监听 div 元素的高度改变？

要监听 div 元素的高度改变，可以使用与监听宽度改变相同的方法。只需要在前面提到的代码中将宽度改为高度即可。通过监听 div 元素的高度改变，可以实现对元素高度变化的实时监测和处理。

3. 如何在 JavaScript 中同时监听 div 元素的宽度和高度改变？

要同时监听 div 元素的宽度和高度改变，可以使用两个独立的 ResizeObserver 对象，一个用于监听宽度改变，另一个用于监听高度改变。分别创建两个 ResizeObserver 对象，并分别将目标元素传递给各自的对象的 observe 方法。然后，通过两个不同的回调函数分别处理宽度和高度的改变事件。这样，当目标 div 元素的宽度或高度发生变化时，对应的回调函数就会被触发。