<div> 尺寸 監聽是一種技術，可以跟蹤 HTML 元素（例如 <div>）的尺寸變化。這在開發具有動態布局、自適應設計和響應式網頁的應用程序中非常有用。在這篇文章中，我們將詳細討論如何使用不同的代碼案例來演示如何監聽 <div> 元素的尺寸變化。
第一個代碼案例是使用原始 JavaScript 來實現 <div> 尺寸的監聽。我們使用 document.querySelector() 方法來選擇要監聽的元素，并將其存儲在變量中。接下來，我們使用 MutationObserver 類來監聽元素的尺寸變化。MutationObserver 類是 JavaScript API 中的一個內置類，用于監視 DOM 樹中的變化，并在發生變化時執行指定的回調函數。在我們的示例中，我們創建了一個回調函數，當元素的尺寸變化時，將顯示 "尺寸已更改" 的提示信息。最后，我們使用 MutationObserver 實例的 observe() 方法來開始監視元素的尺寸變化。

<p>使用 JavaScript 進行尺寸監聽的示例代碼如下：</p>
<pre>
const element = document.querySelector('#myDiv');
const observer = new MutationObserver(function (mutationsList) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
console.log('尺寸已更改');
}
}
});
<br>
observer.observe(element, { attributes: true });

第二個示例中，我們將使用 jQuery 來監聽 <div> 的尺寸變化。，我們使用 $() 函數來選擇要監聽的元素，并將其存儲在一個變量中。然后，我們使用 .resize() 方法來添加一個事件處理程序，該處理程序將在元素的尺寸發生變化時被觸發。在我們的示例中，事件處理程序將顯示 "尺寸已更改" 的提示信息。

<p>使用 jQuery 進行尺寸監聽的示例代碼如下：</p>
<pre>
const $element = $('#myDiv');
$element.resize(function() {
console.log('尺寸已更改');
});

在第三個示例中，我們將使用第三方庫 ResizeObserver 來實現 <div> 尺寸的監聽。ResizeObserver 是一個現代 Web API，專門用于監聽元素的尺寸變化。要使用 ResizeObserver，我們將需要監聽的元素傳遞給 ResizeObserver 構造函數，并創建一個回調函數來處理尺寸變化的事件。在我們的示例中，回調函數將顯示 "尺寸已更改" 的提示信息。

<p>使用 ResizeObserver 進行尺寸監聽的示例代碼如下：</p>
<pre>
const element = document.querySelector('#myDiv');
const observer = new ResizeObserver(function(entries) {
console.log('尺寸已更改');
});
<br>
observer.observe(element);

以上是三種常見的方法來監聽 <div> 元素的尺寸變化。無論您選擇使用原始 JavaScript、jQuery 還是第三方庫，都可以實現監聽 <div> 尺寸的功能。這種技術對于創建具有自適應布局和動態設計的 Web 應用程序非常有用，幫助我們更好地適應不同屏幕尺寸和設備。希望這些代碼示例能為您提供一些啟示和幫助。