快捷導(dǎo)航

JavaScript監(jiān)聽一個(gè)DOM元素大小變化

更新時(shí)間：2020年04月26日 09:57:30 作者：Haor愛打雜

這篇文章主要介紹了JavaScript監(jiān)聽一個(gè)DOM元素大小變化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.需求場(chǎng)景

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

2. 實(shí)現(xiàn)原理

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

通過 iframeWindow.resize 事件來監(jiān)聽DOM大小變化，從而達(dá)到resize事件的一個(gè)監(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ù)防得好，天熱時(shí)疫情會(huì)下降
     另外，會(huì)上有外籍人士提問：假如你現(xiàn)在去非洲，首先要做的是什么？
     鐘南山表示：現(xiàn)在要做的是防護(hù)，防止蔓延是最重要的。
     在非洲，這段時(shí)間如果預(yù)防得好，也可能到天熱時(shí)，疫情發(fā)展情況會(huì)下降。
 </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ù)防得好，天熱時(shí)疫情會(huì)下降

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

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

  在非洲，這段時(shí)間如果預(yù)防得好，也可能到天熱時(shí)，疫情發(fā)展情況會(huì)下降。
 </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)
  }

  /**
   * 運(yùn)行隊(duì)列
   */
  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)建一個(gè)監(jiān)聽實(shí)例
  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>

到此這篇關(guān)于JavaScript監(jiān)聽一個(gè)DOM元素大小變化的文章就介紹到這了,更多相關(guān)JavaScript監(jiān)聽DOM元素大小內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: