\<div> 寬度監(jiān)聽是指通過監(jiān)聽 \<div> 元素的寬度變化來觸發(fā)相應(yīng)的操作或樣式變化。在網(wǎng)頁開發(fā)中，經(jīng)常需要根據(jù)不同的設(shè)備和屏幕尺寸來動態(tài)調(diào)整頁面布局和樣式，因此，利用寬度監(jiān)聽可以實現(xiàn)響應(yīng)式設(shè)計，提升用戶體驗。本文將通過幾個代碼案例來詳細(xì)介紹如何使用 JavaScript 監(jiān)聽 \<div> 元素的寬度變化。
一、基本監(jiān)聽方法
要監(jiān)聽 \<div> 元素的寬度變化，可以使用 JavaScript 中的 ResizeObserver 對象。該對象提供了一種監(jiān)視元素尺寸變化的方法，并在尺寸發(fā)生變化時觸發(fā)相應(yīng)的回調(diào)函數(shù)。
下面是一個簡單的代碼示例，展示如何使用 ResizeObserver 監(jiān)聽 \<div> 元素的寬度變化并輸出當(dāng)前寬度：

\<div id="myDiv" style="width: 200px; height: 200px; background-color: yellow;">\</div>
<br>
<script>
const myDiv = document.getElementById('myDiv');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const width = entry.contentRect.width;
console.log(當(dāng)前寬度：${width}px);
}
});
observer.observe(myDiv);
</script>

在上述代碼中，創(chuàng)建了一個 id 為 "myDiv" 的 \<div> 元素，并設(shè)置了寬度為 200px。然后，通過 document.getElementById 方法獲取該元素，并創(chuàng)建一個 ResizeObserver 對象 observer。在 observer 的回調(diào)函數(shù)中，通過遍歷 entries 數(shù)組獲取每個元素的寬度，并輸出到控制臺。
當(dāng) \<div> 元素的寬度發(fā)生變化時，回調(diào)函數(shù)就會被觸發(fā)，輸出當(dāng)前的寬度值。
二、監(jiān)聽寬度變化并執(zhí)行其他操作
除了輸出寬度值外，我們還可以根據(jù)不同的寬度值執(zhí)行其他操作，例如改變樣式、調(diào)整布局等。下面的代碼示例展示了如何在寬度變化時改變 \<div> 元素的背景顏色：

\<div id="myDiv" style="width: 200px; height: 200px; background-color: yellow;">\</div>
<br>
<script>
const myDiv = document.getElementById('myDiv');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const width = entry.contentRect.width;
if (width < 300) {
myDiv.style.backgroundColor = 'red';
} else {
myDiv.style.backgroundColor = 'green';
}
}
});
observer.observe(myDiv);
</script>

在上述代碼中，當(dāng) \<div> 元素的寬度小于 300px 時，將背景顏色改為紅色；否則，將背景顏色改為綠色。通過監(jiān)聽 \<div> 元素的寬度變化，當(dāng)寬度滿足條件時，即會改變背景顏色。
三、設(shè)置監(jiān)聽閾值
ResizeObserver 還允許我們設(shè)置監(jiān)聽閾值，即在指定范圍內(nèi)才觸發(fā)回調(diào)函數(shù)。下面的代碼示例展示了如何設(shè)置閾值為 100px，當(dāng)寬度變化超過 100px 時，才觸發(fā)回調(diào)函數(shù)：

\<div id="myDiv" style="width: 200px; height: 200px; background-color: yellow;">\</div>
<br>
<script>
const myDiv = document.getElementById('myDiv');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const width = entry.contentRect.width;
if (Math.abs(width - entry.lastEntry.contentRect.width) > 100) {
console.log('寬度變化超過 100px');
}
}
});
observer.observe(myDiv);
</script>

在上述代碼中，通過比較當(dāng)前寬度和上一次觸發(fā)回調(diào)函數(shù)時的寬度，當(dāng)寬度變化超過 100px 時，才輸出 "寬度變化超過 100px" 到控制臺。
本文介紹了如何使用 JavaScript 監(jiān)聽 \<div> 元素的寬度變化。通過 ResizeObserver 對象可以方便地實現(xiàn)對寬度變化的監(jiān)聽，并可以進(jìn)行相應(yīng)的操作和樣式變化，以適應(yīng)不同的設(shè)備和屏幕尺寸。希望本文能夠幫助讀者更好地理解和運用寬度監(jiān)聽的技術(shù)。