javascript - 通过javascript更改div中属性的事件监听器

Question

我的 div 如下所示:

<div id="modal"
     style="position: fixed;
       left: 0px;
       top: 0px;
       width: 100%;
       height: 100%;
       opacity: 0.4;
       background-color: rgb(204, 204, 204);
       display: block;
       z-index: 99;">
</div>

我希望当我的 div 更改为(注意:显示 block 已更改为无)时发生一些事情:

<div id="modal"
     style="position: fixed;
       left: 0px;
       top: 0px;
       width: 100%;
       height: 100%;
       opacity: 0.4;
       background-color: rgb(204, 204, 204);
       display: none;
       z-index: 99;">
</div>

我在考虑一个 EventListener，有人知道如何让它工作吗？

Answer 1

你可以使用 MutationObserver

有点像

var target = document.getElementById('modal');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'style') {
      ...
    }
  });    
});