如何在 JavaScript 中可靠地追蹤 DIV 尺寸變化？

DIV 尺寸變化的事件追蹤

要監控DIV 元素回應視窗大小調整而動態調整大小，必須了解現有事件處理程序的局限性。雖然 jQuery 的調整大小事件對於圖像等傳統的可調整大小的元素有效，但由於 DIV 的流動性，它可能不會觸發 DIV。

為了一致的事件跟踪，我們建議利用 Resize Observer API，它提供了強大且交叉的 API -用於監控DIV尺寸變化的瀏覽器解決方案。此 API 採用簡單的語法並提供精確的尺寸更新。

要為具有可變尺寸的DIV 實作Resize Observer API：

const div = document.getElementById("test_div");

const resizeObserver = new ResizeObserver((entries) => {
  console.log('DIV dimension changed: ', entries[0].borderBoxSize);
});

resizeObserver.observe(div);

此程式碼為目標DIV 初始化一個調整大小觀察器(" test_div") 並在發生調整大小時記錄更新的尺寸。 Entry[0].borderBoxSize 屬性提供了 DIV 的精確寬度和高度，包括其邊框。

透過利用 Resize Observer API，您可以有效地掛鉤 DIV 尺寸變更事件，使您的應用程式能夠動態地回應大小調整並保持一致的使用者體驗。

以上是如何在 JavaScript 中可靠地追蹤 DIV 尺寸變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！