classList.toggle() 不添加 class

Question

我正在尝试使用 classList.toggle 进行开关更改 div 的背景颜色，但它不起作用而且我不知道为什么，尽管它可能非常简单的。有人可以向我澄清一下吗？

var toggle = document.getElementById('switch')

toggle.onclick = function() {
  document.getElementById('testDiv').classList.toggle('test')
}

#testDiv {
  width: 250px;
  margin: auto;
  margin-top: 16px;
  background-color: white;
}

.test {
  background-color: black !important;
}

<label class="switch" id="switch" onclick="myFunction()">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<div id="testDiv">
  <p>
    plain text
  </p>
</div>

Answer 1

您可以在用户单击复选框时调用 myFunction。修复了 CSS 文件以将 !important 放在正确的位置。

function myFunction(){
    document.getElementById('testDiv').classList.toggle('test');
}

#testDiv {
  width: 250px;
  margin: auto;
  margin-top: 16px;
  background-color: white;
}

.test {
  background-color: black !important;
  color: white;
}

<label class="switch" id="switch" for="change_bg">Change background</label>
<input type="checkbox" id="change_bg" onclick="myFunction()">

<div id="testDiv">
  <p>
    plain text
  </p>
</div>

classList.toggle() 不添加 class

classList.toggle() not adding the class

html

javascript

css