這篇文章主要講解了JavaScript監(jiān)聽一個DOM元素大小變化的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為大興安嶺企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站制作，大興安嶺網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

1.需求場景

開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個 div 的size變化。
比如我用canvas繪制了一個chart，當canvas的size發(fā)生變化的時候，需要重新繪制里面的內(nèi)容，這個時候就需要監(jiān)聽resize事件做處理。window上雖然有resize事件監(jiān)聽，但這并不能滿足我們的需求，因為很多時候，div的size發(fā)生了變化，實際 window.resize 事件并未觸發(fā)。
對于div的resize事件的監(jiān)聽，實現(xiàn)方式有很多，比如定時器檢查，通過scroll事件等等，本文主要介紹通過iframe 元素來實現(xiàn)監(jiān)聽。
不過我們可以間接利用window的resize事件監(jiān)聽來實現(xiàn)對于某個div的resize事件監(jiān)聽，請看下面具體實現(xiàn)。

2. 實現(xiàn)原理

• 動態(tài)創(chuàng)建 iframe 標簽，追加到容器中，寬高繼承容器100%；
• 獲取 iframe 中的window，通過 contentWindow 屬性就能獲取到；
• 由于 iframe 的寬高繼承與父節(jié)點，當父容器寬度發(fā)生變化，自然會觸發(fā)iframe中的resize 事件；

通過 iframeWindow.resize 事件來監(jiān)聽DOM大小變化，從而達到resize事件的一個監(jiān)聽；

例子

document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
  console.log('size Change！');
}, false)

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享名稱：JavaScript監(jiān)聽一個DOM元素大小變化的方法-創(chuàng)新互聯(lián)
當前URL：http://weahome.cn/article/dcchce.html