js监听元素样式变化、子元素新增删除、

最新推荐文章于 2024-01-25 15:06:55 发布

不再重要

最新推荐文章于 2024-01-25 15:06:55 发布

阅读量1.5k

点赞数 1

分类专栏： html 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/weixin_42046201/article/details/126290772

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file" >
<div class="post" id="some-id">111</div>
    <br/>
<div οnclick="setStyle()">222</div>
</body>
<script>
    function setStyle(){
        const targetNode = document.getElementById('some-id');
        let num = 0
        setInterval(()=>{
            num += 2
            targetNode.setAttribute('style','width:'+num+'px')
        },1000)
    }
    window.onload = function (){
        // 选择需要观察变动的节点
        const targetNode = document.getElementById('some-id');
        // 观察器的配置（需要观察什么变动）
        const config = { attributes: true, childList: true, subtree: true };
        // 当观察到变动时执行的回调函数
        const callback = function(mutationsList, observer) {
            console.log(mutationsList,observer)
            // Use traditional 'for loops' for IE 11
            for(let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    console.log('监听子节点新增删除');
                }
                else if (mutation.type === 'attributes') {
                    console.log(targetNode.style.width)
                    console.log('The ' + mutation.attributeName + ' attribute was modified.');
                }
            }
        };

        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);
        // 以上述配置开始观察目标节点
        observer.observe(targetNode, config);
        // 之后，可停止观察
        // observer.disconnect();   //暂停监听
    }
</script>
</html>

不再重要

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js监听元素样式变化、子元素新增删除、

// 观察器的配置（需要观察什么变动）// 创建一个观察器实例并传入回调函数。// 当观察到变动时执行的回调函数。// 以上述配置开始观察目标节点。// 选择需要观察变动的节点。// 之后，可停止观察。...
复制链接

扫一扫