监听某个div的宽高是否发生变化(MutationObserver)
web api中有一个叫做MutationObserver的接口MutationObserver接口提供了监视对DOM树所做更改的能力。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。用过vue 的nextTick的就会知道,这个方法就是用到了MutationObserver下面是一个示例// Firefox和Chrome早期版本中带有前...
·
web api中有一个叫做MutationObserver的接口
MutationObserver接口提供了监视对DOM树所做更改的能力。
DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。
用过vue 的nextTick的就会知道,这个方法就是用到了MutationObserver
下面是一个示例
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点
var target = document.querySelector('#rador');
// 创建观察者对象
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
console.log(mutation)
});
});
// 配置观察选项:
var config = {
attributes: true,//检测属性变动
childList: true,//检测子节点变动
characterData: true//节点内容或节点文本的变动。
}
// 传入目标节点和观察选项
observer.observe(target, config);
// /停止观察
// observer.disconnect();
observe方法用来启动监听,它接受两个参数。
第一个参数:所要观察的 DOM 节点
第二个参数:一个配置对象,指定所要观察的特定变动
更多推荐
已为社区贡献18条内容
所有评论(0)