监测div大小变化_js监听div元素的宽高变化

一、js监听window变化的方法

1、onsize只能监听window对象的变化

(1)、 window对象原生、jQuery方法

//原生写法

window.onsize = function(){

console.log("11");

}

//jquery写法

$(window).resize(function(){

console.log("22");

})

//注意：浏览器窗口大小改变时，这段代码会执行多次，对性能影响大，容易造成浏览器假死。

(2)、实现不管窗口怎么改变，只在停止改变之后才执行代码

var resizeTimer = null;

$(window).resize(function(){

if(resizeTimer){

clearTimeout(resizeTimer);

}

resizeTimer = setTimeout(function(){

console.log("窗口改变")

},100)

})

//通过使用定时器的方式来让代码延迟执行，每次窗口改变的时候就清除事件，只有停下改变之后才会继续再执行，解决resize执行多次的问题。

二、js监听div容器变化的方法

1、MutationObserver

(1)、介绍： MutationObserver 可以用来监听整个DOM中的变化。

(2)、构造函数，参数为回调