如何在JS中检测div元素宽度变化(不是窗口大小调整)？

在JS中检测div元素宽度变化的方法有多种，以下是其中一种常用的方法：

使用ResizeObserver API：ResizeObserver是一个新的Web API，用于监听元素大小的变化。它可以观察指定元素的宽度、高度或两者的变化，并在变化发生时触发回调函数。以下是使用ResizeObserver API检测div元素宽度变化的示例代码：

// 创建一个ResizeObserver实例
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 获取div元素的新宽度
    const newWidth = entry.contentRect.width;
    // 执行相应的操作，比如更新UI或调用其他函数
    console.log("div元素宽度变化为：" + newWidth);
  }
});

// 监听目标div元素的宽度变化
const targetDiv = document.querySelector("#targetDiv");
observer.observe(targetDiv);

在上述代码中，我们首先创建了一个ResizeObserver实例，并通过observe方法指定要观察的目标div元素。然后，在回调函数中可以获取到div元素的新宽度，并进行相应的操作。

使用定时器检测：另一种方法是使用定时器周期性地检测div元素的宽度变化。通过在一段时间间隔内比较div元素的当前宽度和上一次记录的宽度，可以判断宽度是否发生了变化。以下是使用定时器检测div元素宽度变化的示例代码：

let lastWidth = document.querySelector("#targetDiv").offsetWidth;

setInterval(() => {
  const currentWidth = document.querySelector("#targetDiv").offsetWidth;
  if (currentWidth !== lastWidth) {
    // 宽度发生了变化
    console.log("div元素宽度变化为：" + currentWidth);
    // 执行相应的操作，比如更新UI或调用其他函数
    lastWidth = currentWidth;
  }
}, 100); // 每100毫秒检测一次

在上述代码中，我们使用offsetWidth属性获取div元素的当前宽度，并与上一次记录的宽度进行比较。如果宽度发生了变化，则执行相应的操作。

以上是两种常用的方法来检测div元素宽度变化。根据具体的需求和场景，选择适合的方法来实现宽度变化的检测。