如何在div列表中切换背景颜色？

<div id="myDiv" onclick="changeColor()">这是一个div元素</div>

<script>
function changeColor() {
  var div = document.getElementById("myDiv");
  if (div.style.backgroundColor === "red") {
    div.style.backgroundColor = "blue";
  } else {
    div.style.backgroundColor = "red";
  }
}
</script>

<style>
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
</style>

<div id="myDiv" class="red" onclick="toggleColor()">这是一个div元素</div>

<script>
function toggleColor() {
  var div = document.getElementById("myDiv");
  if (div.classList.contains("red")) {
    div.classList.remove("red");
    div.classList.add("blue");
  } else {
    div.classList.remove("blue");
    div.classList.add("red");
  }
}
</script>