Question

序言 - 绝对no jQuery！

我需要通过以下方式监视我有权访问的特定DOM元素：

var element = document.getElementById('the-element');

当从element添加或删除CSS类时，我需要将CSS类名称传递给函数。

我很乐意接受合理的解决方法。

例如：

element.onClassChange(myFunction);

function myFunction(classname, state) {
    console.log('The classname is '+classname+' - '+state);
}

Answer 1

<!DOCTYPE html>
<html>
<body>

<p id = "classToAdd" classAdded=false>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>

<button onclick="addClassToP()">Click me</button>

<p id="demo"></p>

<script>
function addClassToP() {

 var pEle = document.getElementById("classToAdd");

 pEle.className += "addedClassName"; 
 pEle.classAdded = true;

 pEle.onchange();
}

document.getElementById("classToAdd").onchange = function(){
  if(this.classAdded){
     alert("class added");
     // do something on class added
     this.classAdded = false; // restoring the classAdded notifier attribute
  }
}


</script>

</body>
</html>

在添加/删除CSS时调用函数

1 个答案: