如何在 JavaScript 中可靠地檢測 DIV 尺寸變化？

檢測DIV 尺寸變化

問題：

問題：

，特別是當其中的元素在視窗大小調整期間重新定位時。然而，傳統的 DIV jQuery 調整大小事件無法偵測尺寸變化。

解決方案：Resize Observer API

更新的解決方案是Resize Observer API，它提供了監視DIV 更改的更好方法

實作：

1. 要使用Resize Observer API：

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

2. 在 HTML 中包含腳本：

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

3. 建立一個新調整大小觀察者：

   resizeObserver.observe(targetDiv);

4. 觀察目標DIV：

   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中文網其他相關文章！