JS 监听DOM的style的方法

有一些自己写的dom或者使用的组件在某些情况下，并没有提供相应的callback函数，这个时候这方法就有用了，本文只是提供其中一个方式。

new MutationObserver()

• 这个类是JS官方提供的类，专门监视对DOM树所做更改的能力。详情可查:new MutationObserver()
• 下面写一个监听dom display的方法
• 代码示例:

const dom = parentNodes.querySelector(选择器) 
//一定要尽量精准，否则会递归次数太多，消耗不必要的内存。
const config = ｛ attributes:true,subtree:true}
// attributes代表监听的是dom的属性，subtree代表可以向下递归。
const observer = new MutationObserver((mutations)=>{
     for(let mutation of mutations) {
            if(mutation.type === “attributes” && mutation.target.className === “custom- class”) {
      const displayValue  = mutation.target.style.display;
      if(displayValue === “none”) {
           // dom is hidden
     } else {
           // dom is visible
     }
  }

     }
});
observer.observe(dom,config);