<div> 寬度變化 監(jiān)聽 在前端開發(fā)中，經(jīng)常遇到需要監(jiān)聽 <div> 元素的寬度變化的情況。例如，當(dāng)頁面布局需要根據(jù)<div>元素的寬度進(jìn)行調(diào)整時，我們需要實時捕捉到寬度的變化。本文將介紹幾種監(jiān)聽 <div> 寬度變化的方法，以及它們的代碼案例。

第一種方法是使用 ResizeObserver API。這是一種現(xiàn)代的監(jiān)聽寬度變化的方法，可以監(jiān)聽<div>元素以及其內(nèi)部元素的寬度變化。下面是一個示例代碼：

const divElement = document.querySelector('.divClass');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('寬度變化:', entry.contentRect.width);
}
});
observer.observe(divElement);

這段代碼中，我們使用 QuerySelector 方法選取了一個類名為 "divClass" 的 <div> 元素。然后，我們創(chuàng)建了一個 ResizeObserver 實例，并通過觀察該實例來監(jiān)聽寬度變化事件。使用 ResizeObserver 時，我們將監(jiān)聽事件的回調(diào)函數(shù)傳遞給構(gòu)造函數(shù)，并在該回調(diào)函數(shù)中處理監(jiān)聽到的寬度變化。在上述示例中，我們將寬度變化的值輸出到控制臺上。

另一種監(jiān)聽 <div> 寬度變化的方法是使用 MutationObserver。這種方法適用于需要監(jiān)聽<div>元素內(nèi)部子元素引起的寬度變化的情況。下面是一個代碼示例：

const targetNode = document.querySelector('.divClass');
const observer = new MutationObserver(mutationsList => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
console.log('寬度變化:', targetNode.offsetWidth);
}
}
});
observer.observe(targetNode, { attributes: true });

在上面的代碼中，我們選取了一個類名為 "divClass" 的 <div> 元素，并創(chuàng)建了一個 MutationObserver 實例。然后，我們通過觀察該實例來監(jiān)聽寬度變化事件。與上一種方法不同的是，我們在監(jiān)聽事件的回調(diào)函數(shù)中判斷發(fā)生變化的是 <div> 元素的樣式，然后輸出寬度變化的值到控制臺。

最后，我們介紹一種基于 CSS Transition 的監(jiān)聽方法。這種方法只適用于當(dāng) <div> 元素的寬度是通過 CSS Transition 過渡動畫進(jìn)行變化時。以下是一個示例代碼：

const divElement = document.querySelector('.divClass');
divElement.addEventListener('transitionend', () => {
console.log('寬度變化:', divElement.offsetWidth);
});

在這段代碼中，我們使用 QuerySelector 方法選取了一個類名為 "divClass" 的 <div> 元素，并通過添加 transitionend 事件監(jiān)聽器來實現(xiàn)寬度變化的捕捉。當(dāng) <div> 元素的過渡動畫結(jié)束時，監(jiān)聽器中的回調(diào)函數(shù)會被觸發(fā)，并輸出寬度變化的值到控制臺上。

通過以上三個例子，我們詳細(xì)說明了幾種監(jiān)聽 <div> 寬度變化的方法及其相應(yīng)的代碼。對于不同的應(yīng)用場景，選擇合適的監(jiān)聽方法可以幫助我們實時獲取到元素寬度的變化，并做出相應(yīng)的調(diào)整。