如何在 JavaScript 中可靠地检测 DIV 尺寸变化？

检测 DIV 尺寸变化

问题：

确定 DIV 的尺寸通常是必要的，特别是当其中的元素在窗口大小调整期间重新定位时。然而，传统的 DIV jQuery 调整大小事件无法检测尺寸变化。

解决方案：Resize Observer API

更新的解决方案是 Resize Observer API，它提供了监视 DIV 更改的更好方法

实现：

要使用 Resize Observer API：

1. 在 HTML 中包含脚本：

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

2. 创建一个新调整大小观察者：

   const resizeObserver = new ResizeObserver(function(entries) {
     ...
   });

3. 观察目标DIV：

   resizeObserver.observe(targetDiv);

4. 定义回调函数来处理尺寸变化：

   function callback(entries) {
     const entry = entries[0];
     const width = entry.contentRect.width;
     const height = entry.contentRect.height;
   
     // Do something with the new dimensions
   }

5. 添加回调函数观察者：

   resizeObserver.addCallback(callback);

   通过使用 Resize Observer API，您现在可以检测并响应 DIV 尺寸的变化，即使内部元素已重新定位。

以上是如何在 JavaScript 中可靠地检测 DIV 尺寸变化？的详细内容。更多信息请关注PHP中文网其他相关文章！