如何用JavaScript实现CSS类的条件切换？

方案一：通过类存在判断实现切换 #

// 先获取目标DOM元素
const element = document.getElementById('text-area-box');

// 检查当前类并执行切换逻辑
if (element.classList.contains('text-area-box')) {
  element.classList.remove('text-area-box');
  element.classList.add('text-area-box-active');
} else {
  element.classList.remove('text-area-box-active');
  element.classList.add('text-area-box');
}

方案二：更简洁的互斥类切换（推荐） #

由于两个类是互斥关系，可以先统一移除两个类，再根据当前状态添加对应类：

const element = document.getElementById('text-area-box');
const hasDefaultClass = element.classList.contains('text-area-box');

// 先移除两个类，避免同时存在
element.classList.remove('text-area-box', 'text-area-box-active');
// 添加目标类
element.classList.add(hasDefaultClass ? 'text-area-box-active' : 'text-area-box');

原代码的错误说明 #

1. 运算符误用：if(curentClass = text_area_box) 使用了赋值运算符=，而非比较运算符，且正确的类存在判断应该用classList.contains方法。
2. 未定义变量：代码里的element和text_area_box都没有获取或定义，必须先通过选择器拿到目标DOM元素。
3. 拼写错误：curentClass应为currentClass。

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