classList.add() 和 remove() 是最安全推荐的动态操作 CSS 类方式，支持单个或多个类的增删、条件切换及全局应用，避免直接操作 className 字符串。
用 classList.add() 和 classList.remove() 是最安全、最推荐的动态操作 CSS 类的方式，避免直接拼接或覆盖 className 字符串。
基础用法：添加与移除单个类
元素的 classList 是一个只读的 DOMTokenList 对象，提供操作类名的方法。添加或删除一个类非常直观：
-
element.classList.add("active")—— 若类不存在，则添加；已存在则无副作用 -
element.classList.remove("hidden")—— 若类存在，则移除；不存在则静默忽略
例如：
<button id="toggleBtn">切换状态</button>
<div id="panel">内容区域</div>
JavaScript 中可这样控制：
const panel = document.getElementById("panel");
const btn = document.getElementById("toggleBtn");
btn.addEventListener("click", () => {
if (panel.classList.contains("hidden")) {
panel.classList.remove("hidden");
panel.classList.add("visible");
} else {
panel.classList.remove("visible");
panel.classList.add("hidden");
}
});
批量操作：一次增删多个类
两个方法都支持传入多个字符串参数，无需多次调用：
-
el.classList.add("a", "b", "c")—— 同时添加三个类 -
el.classList.remove("x", "y", "z")—— 同时移除三个类
注意：参数必须是字符串，不能是数组；若需从数组展开，可用扩展运算符：el.classList.add(...["active", "highlight"])
配合条件逻辑，实现开关式切换
常见需求是“有则删、无则加”，此时用 classList.toggle() 更简洁。但若坚持用 add/remove，可结合 contains() 判断：
if (el.classList.contains("disabled")) {
el.classList.remove("disabled");
el.classList.add("enabled");
} else {
el.classList.remove("enabled");
el.classList.add("disabled");
}
这种写法适合需要不同类名对应不同状态（如 disabled/enabled），而非简单反转同一类名。
注意事项与避坑点
- 类名中不能含空格或制表符，否则会报错；建议用
trim()预处理输入 - 不区分大小写，但类名本身是大小写敏感的（CSS 中类名区分大小写）
- 不修改内联样式
style属性，仅影响 class 属性值 - 对
<html>或<body>元素同样有效，可用于全局主题切换
