单击元素后检查类是否存在

Question

我正在尝试更新我的 javascript 并连接一个简单的 html、CSS 和 JS 设置。

console.log打印出Clicked所以我知道它正在工作，但我的代码是错误的，我看不到它。 该元素未检查现有类“红色”。

我想检查red类是否存在，如果存在则将其删除，如果不存在，则添加该类。

你们中的任何人都可以为我指明一个方向吗？

TIA

tekst.addEventListener("click", () => {
  console.log("Clicked");
  tekst.classList.add("red");

  if (tekst.classList.contains("")) {
    tekst.classList.add("red");
  } else if (tekst.classList.contains("red")) {
    tekst.classList.remove("red");
  }
});

Answer 1

您的代码有效。 但是您要添加红色，然后立即将其删除，这样您就不会看到变化。

条件的替代方法是只toggle类。 （我添加了一个超时，所以你可以看到这个工作）。

 const tekst = document.querySelector('.tekst'); // Comment this line out to see the reverse effect tekst.classList.add("red"); setTimeout(() => tekst.classList.toggle('red'), 2000);

 .red { color: red; }

 <div class="tekst">Test</div>

Answer 2

在我看来，你只需要像这样使用切换方法：

 tekst.classList.toggle("red");