如何可靠地檢測 DIV 元素尺寸變化？

檢測DIV 元素的尺寸變化

當瀏覽器視窗大小調整時，您在檢測DIV 元素的尺寸變化時遇到了困難。此問題探討了此問題的可能解決方案。

jQuery 調整大小事件綁定

您將回呼函數綁定到 DIV 上的 jQuery 調整大小事件的初始方法是不正確的。 resize 事件僅在視窗大小調整時觸發，而 DIV 尺寸變化時不會觸發。

解決方案：Resize Observer API

較新的解決方案是 Resize Observer API，具有良好的瀏覽器支援。此API 可讓您觀察元素尺寸的變化：

const observer = new ResizeObserver((entries) => {
  // Code to handle dimension changes
});

observer.observe(targetElement);

在提供的HTML 範例中，您可以使用Resize Observer API，如下所示：

const textbox = document.getElementById('textbox');
const width = document.getElementById('width');
const height = document.getElementById('height');

const observer = new ResizeObserver(() => {
  width.value = textbox.offsetWidth;
  height.value = textbox.offsetHeight;
});

observer.observe(textbox);

此程式碼當文字當框的尺寸改變時，將更新寬度和高度輸出。

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