MutationObserver监听dom

最新推荐文章于 2024-05-27 17:51:58 发布

李公子lm

最新推荐文章于 2024-05-27 17:51:58 发布

阅读量416

点赞数

本文链接：https://blog.csdn.net/u012869793/article/details/105217805

版权

MutationObserver接口提供了监视对DOM树所做更改的能力，主要可以监视两部分内容，一个是dom节点的变化，另一个是dom属性的变化。接下来看一个例子。
我想要在点击按钮的时候，改变div的大小，同时用MutationObserver监听这个div的属性变化，如果属性变化了，修改背景色。好了接下来看代码。

window.onload = () => {
            var attrold = $("#demo").width();
            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容
            var config = { attributes: true, childlist:true};//配置对象(监听dom属性变化或者节点变化)
            $("#demo").each(function () {
                var _this = $(this);
                var observer = new MutationObserver(function (mutations) {//构造函数回调
                    mutations.forEach(function (record) {
                        if (record.type === "attributes") {//监听属性
                            var attrnew = $("#demo").width();
                            if (attrnew > attrold) {
                                $("#demo").css("background", "black");
                            }
                            else {
                                $("#demo").css("background", "red");
                            }
                        }
                    });
                });
                observer.observe(_this[0], config);
            });
        };

简单说两句，这里面其实包含了一些无用的代码，具体的逻辑按自己的需求写就好，这只是一个实例程序，我把它放到onload里，是为了保证页面一加载的时候就启动对div的监听。监听的是div的属性变化，这里获取了改变之前的宽度和改变之后的宽度，用div的width属性是变大还是变小，来作为修改div的颜色的依据，大概这么个意思。完整代码如下，需要引一下jq。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.4.0.min.js"></script>
    <script>
        function Listen(){
            $("#demo").css("width","50%");
        }
        window.onload = () => {
            var attrold = $("#demo").width();
            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容
            var config = { attributes: true, childlist:true};//配置对象(监听dom属性变化或者节点变化)
            $("#demo").each(function () {
                var _this = $(this);
                var observer = new MutationObserver(function (mutations) {//构造函数回调
                    mutations.forEach(function (record) {
                        if (record.type === "attributes") {//监听属性
                            var attrnew = $("#demo").width();
                            if (attrnew > attrold) {
                                $("#demo").css("background", "black");
                            }
                            else {
                                $("#demo").css("background", "red");
                            }
                        }
                    });
                });
                observer.observe(_this[0], config);
            });
        };
    </script>
</head>
<body>
    <div>
        <div id="demo" style=" background: chocolate;height: 200px; width: 100%">
        
        </div>
        <button onClick="Listen()">改变div大小</button>
    </div>

</body>
</html>

更多学习资料请关注爱游戏爱编程。

爱游戏爱编程.jpg

李公子lm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
MutationObserver监听dom

MutationObserver接口提供了监视对DOM树所做更改的能力，主要可以监视两部分内容，一个是dom节点的变化，另一个是dom属性的变化。接下来看一个例子。我想要在点击按钮的时候，改变div的大小，同时用MutationObserver监听这个div的属性变化，如果属性变化了，修改背景色。好了接下来看代码。window.onload = () => { ...
复制链接

扫一扫