dom监听元素从display: none到页面中-编程知识

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

其实业务中还是会碰见这样的需求的，特别是一些框架内不，这个并不是很复杂，我们可以考虑如何去监听到 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>