如何高效检测DIV元素尺寸变化？

DIV 元素中的尺寸变化检测

检测 DIV 元素尺寸的变化，尤其是在窗口大小调整期间，可能是一项很有价值的功能在某些情况下。本文探讨了如何使用 Resize Observer API 来实现此目的。

jQuery 调整大小事件处理程序（如提供的 HTML 代码中所示）不适合此目的。 Resize Observer API 提供了一种标准化且更有效的方法来侦听 DOM 元素中的尺寸变化。

使用 Resize Observer API

检测 DIV 中的尺寸变化使用 Resize Observer API，请按照以下步骤操作：

1. 创建一个新的 ResizeObserver instance:

const observer = new ResizeObserver(callback);

2. 将回调函数传递给 ResizeObserver 构造函数，每当观察到的元素的尺寸发生变化时就会调用该函数：

function callback(entries) {
  // Check if the entry pertains to the target DIV
  const targetIndex = entries.findIndex((entry) => entry.target === targetDiv);
  if (targetIndex < 0) {
    return;
  }

  // Update the dimensions based on the entry's contentRect
  const { width, height } = entries[targetIndex].contentRect;
  targetDiv.style.width = `${width}px`;
  targetDiv.style.height = `${height}px`;
}

3. 使用ResizeObserver观察目标DIV实例：

observer.observe(targetDiv);

4. 在您的 HTML 代码中，确保包含适用于旧版浏览器的 Resize Observer 填充：

<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

示例代码

以下代码片段提供了使用调整大小的实际示例Observer API：

<div>

通过利用 Resize Observer API，您可以有效地检测 DIV 元素中的尺寸变化，从而使您能够在 Web 应用程序中做出相应的响应。

以上是如何高效检测DIV元素尺寸变化？的详细内容。更多信息请关注PHP中文网其他相关文章！