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

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.调用

  
 
 
  
    #content {
    overflow: auto;
  }
 
 
 
 
      钟南山：非洲如果预防得好，天热时疫情会下降
     另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？
     钟南山表示：现在要做的是防护，防止蔓延是最重要的。
     在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
 

 改变宽高

 
 

完整代码

 
 
 
 
  #content {
  overflow: auto;
  }
 
 
 
 
  钟南山：非洲如果预防得好，天热时疫情会下降

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

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

  在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
 
 改变宽高

 
 

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