JavaScript监听一个DOM元素大小变化

要监听一个DOM元素大小的变化，我们可以利用JavaScript提供的IntersectionObserver API来实现。IntersectionObserver设计的初衷是为了监听页面中一个元素是否进入了视窗，但它也可以用于监听元素的大小变化。

以下是监听DOM元素大小变化的详细攻略：

步骤一：创建一个IntersectionObserver实例

首先，我们需要创建一个IntersectionObserver实例。我们可以传递一个回调函数作为参数，用于在元素进入或离开视窗时触发。

const observer = new IntersectionObserver((entries) => {
  console.log(entries);
});

步骤二：观察要监听的DOM元素

然后，我们需要将要监听的DOM元素传递给IntersectionObserver实例的observe方法。

const element = document.querySelector('.element-to-observe');
observer.observe(element);

步骤三：处理回调函数中的参数

在回调函数中，我们可以处理entries参数，它是一个IntersectionObserverEntry对象的数组，用于描述进入或离开视窗的元素的状态。

我们可以使用IntersectionObserverEntry对象的boundingClientRect属性来获取元素的大小和位置信息。我们可以将旧的大小信息存储在一个变量中，然后与新的大小信息进行比较，以检测元素大小的变化。

let oldWidth = 0;
let oldHeight = 0;

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const newWidth = entry.boundingClientRect.width;
    const newHeight = entry.boundingClientRect.height;

    if (oldWidth !== newWidth || oldHeight !== newHeight) {
      console.log("Element size changed!");
      console.log("New width: ", newWidth);
      console.log("New height: ", newHeight);

      // Do something here...

      oldWidth = newWidth;
      oldHeight = newHeight;
    }
  });
});

示例一：监听图片的大小变化

<img class="image" src="example.jpg">

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const newWidth = entry.boundingClientRect.width;
    const newHeight = entry.boundingClientRect.height;

    if (oldWidth !== newWidth || oldHeight !== newHeight) {
      console.log("Image size changed!");
      console.log("New width: ", newWidth);
      console.log("New height: ", newHeight);

      // Do something here...

      oldWidth = newWidth;
      oldHeight = newHeight;
    }
  });
});

const image = document.querySelector('.image');
observer.observe(image);

示例二：监听一个含有动画效果的矩形的大小变化

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: increase-size 1s forwards;
}

@keyframes increase-size {
  from { width: 100px; height: 100px; }
  to { width: 200px; height: 200px; }
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const newWidth = entry.boundingClientRect.width;
    const newHeight = entry.boundingClientRect.height;

    if (oldWidth !== newWidth || oldHeight !== newHeight) {
      console.log("Box size changed!");
      console.log("New width: ", newWidth);
      console.log("New height: ", newHeight);

      // Do something here...

      oldWidth = newWidth;
      oldHeight = newHeight;
    }
  });
});

const box = document.querySelector('.box');
observer.observe(box);

以上是利用IntersectionObserver API监听一个DOM元素大小变化的完整攻略，并附带了两条示例说明。