dom监听元素从display: none到页面中

news2024/12/24 10:16:42

其实业务中还是会碰见这样的需求的，特别是一些框架内不，这个并不是很复杂，我们可以考虑如何去监听到 dom元素样式属性的变化就可以

很多童鞋可能对原生js的不够熟悉，现在大多数同学只要会写简单的vue操作就可以做一些基础的前端工作了，然后就是查文档，其实更多的时间可以花在对自己js基础建设的

今天要说的这个就是一个js api

new MutationObserver
除了这个还有一个面试会经常问的是 IntersectionObserver 监听dom元素进入可视化区域，用这个api完成图片的懒加载，但今天主角又不是它嘿嘿，

而且这个api兼容性也是不错的哦
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: none;
            height: 200px;
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        const config = { attributes: true }
        const observe = new MutationObserver((mutations, observer) => {
            for(let mutation of mutations){ 
                if(mutation.type === "attributes") {
                    console.log('dom is now visible')
                }
            }
        })
        observe.observe(div, config)
        setTimeout(() => {
            div.style.display = 'block'
        }, 3000)
    </script>
</body>

</html>