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

<p>使用 JavaScript 進行尺寸監(jiān)聽的示例代碼如下：</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 來監(jiān)聽 <div> 的尺寸變化。，我們使用 $() 函數(shù)來選擇要監(jiān)聽的元素，并將其存儲在一個變量中。然后，我們使用 .resize() 方法來添加一個事件處理程序，該處理程序?qū)⒃谠氐某叽绨l(fā)生變化時被觸發(fā)。在我們的示例中，事件處理程序?qū)@示 "尺寸已更改" 的提示信息。

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

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

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

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