溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript監(jiān)聽一個DOM元素大小變化的方法

發(fā)布時間：2020-07-30 14:19:33 來源：億速云 閱讀：510 作者：小豬 欄目：web開發(fā)

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

1.需求場景

開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個 div 的size變化。
比如我用canvas繪制了一個chart，當(dāng)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 標(biāo)簽，追加到容器中，寬高繼承容器100%；
  • 獲取 iframe 中的window，通過 contentWindow 屬性就能獲取到；
  • 由于 iframe 的寬高繼承與父節(jié)點，當(dāng)父容器寬度發(fā)生變化，自然會觸發(fā)iframe中的resize 事件；

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

例子

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

3.調(diào)用

<!DOCTYPE html>
<html>
  <head>
 <meta charset="utf-8">
 <title>DIV寬高監(jiān)聽</title>
  <style type="text/css">
    #content {
    overflow: auto;
  }
 </style>
 </head>
 <body>
 <div id="content">
      鐘南山：非洲如果預(yù)防得好，天熱時疫情會下降
     另外，會上有外籍人士提問：假如你現(xiàn)在去非洲，首先要做的是什么？
     鐘南山表示：現(xiàn)在要做的是防護(hù)，防止蔓延是最重要的。
     在非洲，這段時間如果預(yù)防得好，也可能到天熱時，疫情發(fā)展情況會下降。
 </div>

 <button id="change-size">改變寬高</button>

 <script type="text/javascript">
  var eleResize = new ElementResize('#content');
  eleResize.listen(function() {
  console.log('size change!')
  })

  //改變寬高
  document.querySelector('#change-size').addEventListener('click', function() {
  let cont = document.querySelector('#content');
  cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
  cont.style.height = Math.floor(Math.random() * 300) + 'px';
  }, false)
 </script>
 </body>
</html>

完整代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>DIV寬高監(jiān)聽</title>
 <style type="text/css">
  #content {
  overflow: auto;
  }
 </style>
 </head>
 <body>
 <div id="content">
  鐘南山：非洲如果預(yù)防得好，天熱時疫情會下降

  另外，會上有外籍人士提問：假如你現(xiàn)在去非洲，首先要做的是什么？

  鐘南山表示：現(xiàn)在要做的是防護(hù)，防止蔓延是最重要的。

  在非洲，這段時間如果預(yù)防得好，也可能到天熱時，疫情發(fā)展情況會下降。
 </div>
 <button id="change-size">改變寬高</button>

 <script type="text/javascript">
  (function() {
  let self = this;
  /**
   * 元素寬高監(jiān)聽
   * @param {Object} el 監(jiān)聽元素選擇器
   */
  function ElementResize(eleSelector) {
   if (!(this instanceof ElementResize)) return;
   if (!eleSelector) return;
   this.eleSelector = eleSelector;
   this.el = document.querySelector(eleSelector);
   this.queue = [];
   this.__init(); //globel init
  }

  //初始化
  ElementResize.prototype.__init = function() {
   let iframe = this.crateIElement();
   this.el.style.position = 'relative';
   this.el.appendChild(iframe)
   this.bindEvent(iframe.contentWindow);
  }

  /**
   * 設(shè)置元素樣式
   * @param {HTMLObject} el
   * @param {Object} styleJson
   */
  ElementResize.prototype.setStyle = function(el, styleJson) {
   if (!el) return;
   styleJson = styleJson || {
   opacity: 0,
   'z-index': '-1111',
   position: 'absolute',
   left: 0,
   top: 0,
   width: '100%',
   height: '100%',
   };
   let styleText = '';
   for (key in styleJson) {
   styleText += (key + ':' + styleJson[key] + ';');
   }
   el.style.cssText = styleText;
  }

  /**
   * 創(chuàng)建元素
   * @param {Object} style
   */
  ElementResize.prototype.crateIElement = function(style) {
   let iframe = document.createElement('iframe');
   this.setStyle(iframe);
   return iframe;
  }

  /**
   * 綁定事件
   * @param {Object} el
   */
  ElementResize.prototype.bindEvent = function(el) {
   if (!el) return;
   var _self = this;
   el.addEventListener('resize', function() {
   _self.runQueue();
   }, false)
  }

  /**
   * 運行隊列
   */
  ElementResize.prototype.runQueue = function() {
   let queue = this.queue;
   for (var i = 0; i < queue.length; i++) {
   (typeof queue[i]) === 'function' && queue[i].apply(this);
   }
  }

  /**
   * 外部監(jiān)聽
   * @param {Object} cb 回調(diào)函數(shù)
   */
  ElementResize.prototype.listen = function(cb) {
   if (typeof cb !== 'function') throw new TypeError('cb is not a function!');
   this.queue.push(cb);
  }

  self.ElementResize = ElementResize;
  })()
  
  //創(chuàng)建一個監(jiān)聽實例
  var eleResize = new ElementResize('#content');
  eleResize.listen(function() {
  console.log('我是listener')
  })

  //寬高切換
  document.querySelector('#change-size').addEventListener('click', function() {
  let cont = document.querySelector('#content');
  cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
  cont.style.height = Math.floor(Math.random() * 300) + 'px';
  }, false)
 </script>
 </body>
</html>

看完上述內(nèi)容，是不是對JavaScript監(jiān)聽一個DOM元素大小變化的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手