classList.toggle 是最简洁安全的切换类名方法，自动判断增删；支持布尔参数强制控制、链式或循环切换多类；IE10+支持，禁用空格/特殊字符，不覆盖现有类。
classList.toggle 是 JavaScript 中最简洁、安全的切换类名方法，它会自动判断元素是否已存在指定类名：存在则移除，不存在则添加。
基础用法：单个类名切换
直接传入类名字符串即可：
const btn = document.getElementById('myButton');
btn.classList.toggle('active');
点击一次添加 active 类，再点击一次移除——无需手动检查 contains() 或调用 add()/remove()。
带布尔参数的强制控制
第二个参数是布尔值，可跳过自动判断，强制设置类名状态：
立即学习“Java免费学习笔记（深入）”；
// 强制添加（不管原来有没有）
el.classList.toggle('highlight', true);
// 强制移除（即使本来没有也不会报错）
el.classList.toggle('highlight', false);
这个特性适合配合条件逻辑使用，比如根据复选框状态统一控制多个元素：
checkbox.addEventListener('change', () => {
items.forEach(item => item.classList.toggle('selected', checkbox.checked));
});
一次切换多个类名？不行，但可以链式调用
toggle 每次只接受一个类名，不能像 add() 或 remove() 那样传多个。如需切换多个类，需分别调用或封装函数：
// 方式一：链式调用
el.classList.toggle('a').toggle('b').toggle('c');
// 方式二：循环处理（推荐用于动态类名列表）
['a', 'b', 'c'].forEach(cls => el.classList.toggle(cls));
注意兼容性与常见陷阱
- IE 10+ 支持，IE9 及更早版本不支持，需用
className字符串操作替代 - 类名中不能含空格或特殊字符，否则抛错；建议用
trim()清理输入 - 切换不存在的类不会报错，这是设计优势，不是 bug
- 不要在
class属性上直接赋值（如el.className = 'x y'），会覆盖所有现有类，破坏classList的原子性
