js监听div元素的宽高变化

lansheng228 发布于2019-08-23 18:21 / 884人阅读

摘要：构造函数，参数为回调函数构造函数为，它在监听到中的改变并且一系列改变结束后触发回调函数。是要监听的元素，为监听选项对象，可选的选项如下所以监听元素宽高变化，就是监听属性变化这样当元素发生变化时，就会触发构造函数中的函数。

一、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）、构造函数，参数为回调函数

构造函数为window.MutationObserver，它在监听到DOM中的改变并且一系列改变结束后触发回调函数。他与事件不同的是：它在DOM变化时，会记录每一个DOM的变化（为一个MutationRecord对象），到DOM变化结束时触发回调函数。DOM变化可能是一系列的（比如同时改变宽和高），那么这一系列的变化就会产生一个队列，这个队列会作为参数传递给回调函数。

由于浏览器差异。一些版本的浏览器各自支持了构造函数，但是用法一致的。实例化一个观察者，代码如下：

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
let observer = new MutationObserver(callback);

（3）、常用三个API接口

1️⃣、observe(element,options) 配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。
element是要监听的DOM元素，options为监听选项对象，可选的选项如下：

所以监听元素宽高变化，就是监听style属性变化

observer.observe(element,{attributes:true,attributeFilter:["style"],attributeOldValue:true});

//这样当元素style发生变化时，就会触发构造函数中的callback函数。即：

let observer = new MutationObserver(callback) ，触发这里的callback。

2️⃣、 disconnect() 阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe方法，该观察者对象包含的回调函数都不会再被调用。

3️⃣、 takeRecords() 从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到一个MutationRecord对象构成的新数组中。

2、vue示例

注意：这里记录了旧的宽高数据来避免重复触发回调函数，这样做的原因在于宽高数据改变时，不一定是整数，而MutationRecord.recordOldValue中记录的是取整后的数据，这样就会导致在拖动改变DOM元素的宽高时，数值一直在整数和小数之间跳动，会多次触发。

GPU服务器私有云 js 监听数据变化 asp获取屏幕的宽高 js清除div元素 div添加元素的js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105082.html

监听div的resize

摘要：上网找了找，对于的事件的监听，实现方式有很多，比如基于的小插件通过元素进行监听来监听元素基于的周期性检查虽然是实现了对元素宽高的监听，但看上去很瓜。简单点说，就是：在被监听的 div 中添加 iframe 标签，设置其高宽均为 100%；在 iframe 的 resize 被触发时，则表明 div 的大小正在改变！参考 Resize on div el...

TNFE 2019-08-23 12:10 评论0 收藏0
监听div的resize

摘要：上网找了找，对于的事件的监听，实现方式有很多，比如基于的小插件通过元素进行监听来监听元素基于的周期性检查虽然是实现了对元素宽高的监听，但看上去很瓜。简单点说，就是：在被监听的 div 中添加 iframe 标签，设置其高宽均为 100%；在 iframe 的 resize 被触发时，则表明 div 的大小正在改变！参考 Resize on div el...

legendaryedu 2019-08-02 11:37 评论0 收藏0
如何优雅监听容器高度变化

摘要：哈哈哈哈，以上纯属虚构，不过在最近项目中还真遇到过对容器监听高宽变化在使用或滚动插件，如果容器内部元素有高度变化要去及时更新外部包裹容器，即调用方法。处理很简单，只需在动画停止事件触发时监听高宽变化即可。前言老鸟：怎样去监听 DOM 元素的高度变化呢？菜鸟：哈哈哈哈哈，这都不知道哦，用 onresize 事件鸭！老鸟扶了扶眼睛，空气安静几秒钟，菜鸟才晃过神来。对鸭，普通 DOM 元...

hizengzeng 2019-08-26 10:20 评论0 收藏0