好资源导航 » 文章资讯 » JavaScript监听一个DOM元素大小变化

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

2023-07-26 16:23:04 74

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('sizeChange！');
},false)

3.调用





DIV宽高监听

#content{
overflow:auto;
}




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

改变宽高 vareleResize=newElementResize('#content'); eleResize.listen(function(){ console.log('sizechange!') }) //改变宽高 document.querySelector('#change-size').addEventListener('click',function(){ letcont=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)

完整代码





DIV宽高监听

#content{
overflow:auto;
}




钟南山：非洲如果预防得好，天热时疫情会下降

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

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

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

改变宽高 (function(){ letself=this; /** *元素宽高监听 *@param{Object}el监听元素选择器 */ functionElementResize(eleSelector){ if(!(thisinstanceofElementResize))return; if(!eleSelector)return; this.eleSelector=eleSelector; this.el=document.querySelector(eleSelector); this.queue=[]; this.__init();//globelinit } //初始化 ElementResize.prototype.__init=function(){ letiframe=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%', }; letstyleText=''; for(keyinstyleJson){ styleText+=(key+':'+styleJson[key]+';'); } el.style.cssText=styleText; } /** *创建元素 *@param{Object}style */ ElementResize.prototype.crateIElement=function(style){ letiframe=document.createElement('iframe'); this.setStyle(iframe); returniframe; } /** *绑定事件 *@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(){ letqueue=this.queue; for(vari=0;i

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐