JavaScript监听一个DOM元素大小变化

程序员文章站 2022-03-20 17:39:39

1.需求场景开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要重新绘制里面的内容，这个时候就需...

1.需求场景

开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。
比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要重新绘制里面的内容，这个时候就需要监听resize事件做处理。window上虽然有resize事件监听，但这并不能满足我们的需求，因为很多时候，div的size发生了变化，实际 window.resize 事件并未触发。
对于div的resize事件的监听，实现方式有很多，比如定时器检查，通过scroll事件等等，本文主要介绍通过iframe 元素来实现监听。
不过我们可以间接利用window的resize事件监听来实现对于某个div的resize事件监听，请看下面具体实现。

2. 实现原理

动态创建 iframe 标签，追加到容器中，宽高继承容器100%；
获取 iframe 中的window，通过 contentwindow 属性就能获取到；
由于 iframe 的宽高继承与父节点，当父容器宽度发生变化，自然会触发iframe中的resize 事件；

通过 iframewindow.resize 事件来监听dom大小变化，从而达到resize事件的一个监听；

例子

document.queryselector("#ifarme_id").contentwindow.addeventlistener('resize', () => {
  console.log('size change！');
}, false)

3.调用

<!doctype html>
<html>
  <head>
 <meta charset="utf-8">
 <title>div宽高监听</title>
  <style type="text/css">
    #content {
    overflow: auto;
  }
 </style>
 </head>
 <body>
 <div id="content">
      钟南山：非洲如果预防得好，天热时疫情会下降
     另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？
     钟南山表示：现在要做的是防护，防止蔓延是最重要的。
     在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
 </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宽高监听</title>
 <style type="text/css">
  #content {
  overflow: auto;
  }
 </style>
 </head>
 <body>
 <div id="content">
  钟南山：非洲如果预防得好，天热时疫情会下降

  另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？

  钟南山表示：现在要做的是防护，防止蔓延是最重要的。

  在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
 </div>
 <button id="change-size">改变宽高</button>

 <script type="text/javascript">
  (function() {
  let self = this;
  /**
   * 元素宽高监听
   * @param {object} el 监听元素选择器
   */
  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);
  }

  /**
   * 设置元素样式
   * @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;
  }

  /**
   * 创建元素
   * @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);
   }
  }

  /**
   * 外部监听
   * @param {object} cb 回调函数
   */
  elementresize.prototype.listen = function(cb) {
   if (typeof cb !== 'function') throw new typeerror('cb is not a function!');
   this.queue.push(cb);
  }

  self.elementresize = elementresize;
  })()
  
  //创建一个监听实例
  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>

到此这篇关于javascript监听一个dom元素大小变化的文章就介绍到这了,更多相关javascript监听dom元素大小内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

上一篇： vue总线机制(bus)知识点详解

下一篇： Element实现表格嵌套、多个表格共用一个表头的方法

JavaScript监听一个DOM元素大小变化

JavaScript监听一个DOM元素大小变化

vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall

JavaScript中MutationObServer监听DOM元素详情

vue 监听dom元素的宽高变化

在Javascript中使用ResizeObserver 监听dom元素

JS实时监听DOM元素变化 - MutationObserver

JavaScript监听DOM元素大小变化

js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法_javascript技巧

使用jQuery监听DOM元素大小变化_jquery

使用jQuery监听DOM元素大小变化