点击元素后类存在性检查问题：JavaScript类切换功能故障排查

你的代码有两个关键问题导致类切换失效：

• 事件触发后第一行就执行了tekst.classList.add("red")，这会强制给元素加上red类，后面的判断逻辑根本起不到切换作用。
• 判断条件tekst.classList.contains("")完全错误，contains()方法需要传入具体的类名，空字符串无法匹配任何CSS类。

手动判断的修正版本 #

先移除开头多余的add调用，然后正确判断元素是否包含red类：

tekst.addEventListener("click", () => {
  console.log("Clicked");
  if (tekst.classList.contains("red")) {
    tekst.classList.remove("red");
  } else {
    tekst.classList.add("red");
  }
});

更简洁的方案：使用classList.toggle() #

DOM API提供了专门的toggle()方法，一行代码就能实现“存在则移除，不存在则添加”的逻辑，直接替代手动判断：

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

这个方法内部已经封装了判断逻辑，是处理类切换场景的最优解。

内容的提问来源于stack exchange，提问作者tceriksen