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

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

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

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

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

而且这个api兼容性也是不错的哦
dom监听元素 从display: none到页面中_第1张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

关注我 持续更新 前端知识。 也希望看到这篇博客的同学 多多关注基础js,大神不用接受这个意见

你可能感兴趣的:(前端)