javascript - 在css类更改后执行javascript

Question

每当我单击按钮时，我都会使用此代码隐藏 div。我试图激活此功能，而不是在“onclick”上，而是在按钮获得“活动”类时。

那可能吗？

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

标签： javascriptonclick

Answer 1

虽然，不确定元素的类是如何变化的，但如果元素的类使用classList.contains().

以下示例与MutationObserver和setInterval()一起演示：

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block" || x.style.display === '') {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
var elem = document.getElementById("tryBtn");

let observer = new MutationObserver(mutationRecords => {
  if(elem.classList.contains('active')){
    myFunction();
  }
});

// observe attributes
observer.observe(elem, {
  attributes: true
});

// test
setInterval(function(){
  if(elem.classList.contains('active')){
    elem.classList.remove('active');
  }
  else{
    elem.classList.add('active')
  }
}, 1000);

<button id="tryBtn">Try it</button>

<div id="myDIV">
  This is my DIV element.
</div>