javascript监听普通dom容器的大小样式

像onresize这种事件,都是挂载在全局对象Window下的:

 window.addEventListener("resize",function(){
  
 })

但是现在需求是,改变某个dom容器比如.box的大小,触发某个事件:

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。
创建并返回一个新的 MutationObserver 它会在***指定的DOM发生变化时被调用***。

我项目中的写法:

// 实例化这个监听的构造函数
var observer = new MutationObserver(function (mutations, observer) {
  		console.log(mutations)
       //  当你监听的元素发生变化时要做的事情 do something...
});
// 发生变化的项
var config = {
    attributes: true,
    attributeOldValue: true,
    attributeFilter: [
        'style'
    ]
};
//  监听的dom
var el = document.getElementsByClassName('content')[0]
// 调用监听函数
observer.observe(el, config);

可以看下dom发生变化时候都打印了什么,这是这个函数的官方说明,包括用法都很详细。

发布了38 篇原创文章 · 获赞 28 · 访问量 1005

猜你喜欢

转载自blog.csdn.net/huanhuan03/article/details/103893464