js 监视元素的宽度变化

要监视元素的宽度变化，可以使用JavaScript来实现。主要的方法是使用MutationObserver（变动观察器）来监视元素的属性变化。

MutationObserver是一种内置的JavaScript对象，它可以异步观察DOM树的变动，并且可以接收通知来执行相应的操作。

首先，需要创建一个MutationObserver对象，并将它绑定到需要监视的目标元素上。可以使用document.querySelector()方法来选择要监视的元素。

然后，使用MutationObserver对象的observe()方法来开始观察元素的变化。观察的属性类型可以是attributes、childList或者characterData。在这种情况下，我们要监视宽度的变化，所以属性类型应该是attributes。

最后，在观察器的回调函数中，可以编写代码来处理元素宽度变化的情况。回调函数的参数是一个数组，包含所有变化的MutationRecord对象。可以通过遍历这个数组来获取具体的变化信息。

下面是一个示例代码：

// 选择要监视的元素
const targetElement = document.querySelector('.element');

// 创建MutationObserver对象
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'style') {
      // 处理宽度变化的情况
      const width = targetElement.offsetWidth;
      console.log('宽度变化为:' + width);
    }
  });
});

// 开始观察元素的宽度变化
observer.observe(targetElement, { attributes: true });

通过以上代码，可以实现对元素宽度变化的监视，并在控制台输出变化后的宽度。