\<div> 寬度監聽是指通過監聽 \<div> 元素的寬度變化來觸發相應的操作或樣式變化。在網頁開發中，經常需要根據不同的設備和屏幕尺寸來動態調整頁面布局和樣式，因此，利用寬度監聽可以實現響應式設計，提升用戶體驗。本文將通過幾個代碼案例來詳細介紹如何使用 JavaScript 監聽 \<div> 元素的寬度變化。
一、基本監聽方法
要監聽 \<div> 元素的寬度變化，可以使用 JavaScript 中的 ResizeObserver 對象。該對象提供了一種監視元素尺寸變化的方法，并在尺寸發生變化時觸發相應的回調函數。
下面是一個簡單的代碼示例，展示如何使用 ResizeObserver 監聽 \<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;
console.log(當前寬度：${width}px);
}
});
observer.observe(myDiv);
</script>

在上述代碼中，創建了一個 id 為 "myDiv" 的 \<div> 元素，并設置了寬度為 200px。然后，通過 document.getElementById 方法獲取該元素，并創建一個 ResizeObserver 對象 observer。在 observer 的回調函數中，通過遍歷 entries 數組獲取每個元素的寬度，并輸出到控制臺。
當 \<div> 元素的寬度發生變化時，回調函數就會被觸發，輸出當前的寬度值。
二、監聽寬度變化并執行其他操作
除了輸出寬度值外，我們還可以根據不同的寬度值執行其他操作，例如改變樣式、調整布局等。下面的代碼示例展示了如何在寬度變化時改變 \<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>

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

\<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>

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