原生Js监听普通dom尺寸变化

最新推荐文章于 2024-05-22 10:34:11 发布

weixin_30648587

最新推荐文章于 2024-05-22 10:34:11 发布

阅读量1.2k

点赞数

原文链接：http://www.cnblogs.com/zhoumingjie/p/9773895.html

版权

原生Js监听普通dom尺寸变化

具体做法有以下几种：

初始化项目后，轮询，反复查看 dom 尺寸是否变化，这种一听就感觉不好，开销太大。
监听元素的滚动事件，在目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。参考文章
通过 MutationObserver 监听dom 节点变化，MutationObserver 是在DOM4规范中定义的，它的前身是 MutationEvent 事件，该事件最初在 DOM2 事件规范中介绍，到来了 DOM3 事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用；可以用它来监听 dom style 的变化, demo 代码，文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="demo" style="background: blue; height: 200px; width: 100%">
        demo 内容
    </div>
    <script>
        var observer = new MutationObserver(function (mutations, observer) {
            mutations.forEach(function (mutation) {
                console.log(mutation);
            });
        });
        var config = {
            attributes: true,
            attributeOldValue: true,
            attributeFilter: [
                'style'
            ]
        };
        var el = document.getElementById('demo');
        
        observer.observe(el, config);
    </script>
</body>
</html>

Ie9-10 默认支持 div 的 resize 事件，可以直接通过 div.attachEvent('onresize', handler); 的方式实现;其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div，这样当 div 的 size 发生变化时，object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。参考文章

总结：简单记录，以作备忘

转载于:https://www.cnblogs.com/zhoumingjie/p/9773895.html

weixin_30648587

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生Js监听普通dom尺寸变化

原生Js监听普通dom尺寸变化具体做法有以下几种：初始化项目后，轮询，反复查看 dom 尺寸是否变化，这种一听就感觉不好，开销太大。监听元素的滚动事件，在目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。参考文章通过 MutationObserver 监听dom 节点变化，MutationObserver 是在DOM4规范中定义的，...
复制链接

扫一扫