zoukankan      html  css  js  c++  java
  • 原生Js监听普通dom尺寸变化

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

    具体做法有以下几种:

    1. 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大。
    2. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 div,是隐藏不可见的,当目标 dom 大小变化时,触发滚动事件。参考文章
    3. 通过 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;  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>
    
    1. Ie9-10 默认支持 div 的 resize 事件,可以直接通过 div.attachEvent('onresize', handler); 的方式实现;其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div,这样当 div 的 size 发生变化时,object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。参考文章
    总结:简单记录,以作备忘
  • 相关阅读:
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven教程
    SASS
  • 原文地址:https://www.cnblogs.com/zhoumingjie/p/9773895.html
Copyright © 2011-2022 走看看