classlist.add()是最常用且安全的添加类方法，只添加不存在的类，支持多参数或展开数组，不接受空格分隔字符串；误用classname+=会覆盖原类名；toggle()适用于切换状态，replace()需注意兼容性与旧类存在前提。
点击按钮后用 classList.add() 添加类名
直接调用 classList.add() 是最常用也最安全的方式，它只添加不存在的类，重复调用不会报错也不会产生冗余。注意它不支持一次传入空格分隔的字符串（比如 add('btn-active hover') 会整个当做一个类名），必须拆成多个参数或数组展开。
常见错误是误写成 className += ' new-class' —— 这会覆盖原有类名，或在没初始化 className 时导致 undefinednew-class。
- 正确写法：
button.classList.add('active', 'fade-in') - 动态加一个变量类名：
button.classList.add(classNameVar) - 避免重复添加（
add()本身已防重复，无需额外判断）
切换类名用 classList.toggle() 更省事
需要“点一下加、再点一下删”的交互时，classList.toggle() 比手动判断 contains() + add()/remove() 简洁得多。它默认行为就是切换，传第二个参数 true 或 false 可强制设为添加或移除。
容易踩的坑是把它当成纯“添加”用：比如 toggle('disabled') 在按钮已禁用时反而会把类去掉，导致逻辑反向。确认是否真需要“切换”，而不是单向状态控制。
- 基础切换：
btn.classList.toggle('selected') - 强制添加：
btn.classList.toggle('disabled', true) - 配合条件判断：
btn.classList.toggle('error', hasError)
批量操作类名要小心 classList.replace() 的兼容性
replace(oldClass, newClass) 在 Chrome 61+、Firefox 69+、Safari 12.1+ 才支持，IE 完全不支持。如果项目需兼容旧浏览器，得降级用 remove() + add() 组合。
另一个问题是：如果 oldClass 不存在，replace() 不会报错，但也不会添加 newClass —— 它只替换，不兜底。这点和 add() 的“尽力而为”不同。
- 安全写法（兼容旧环境）：
el.classList.remove('old'); el.classList.add('new'); - 现代写法（确认目标环境支持）：
el.classList.replace('old', 'new') - 别指望
replace()能一次换多个类 —— 它只处理一对
样式生效但 DOM 看不到类名？检查是否用了 setAttribute('class', ...)
如果手动调用 setAttribute('class', 'a b c')，会完全覆盖 classList 的内部状态，后续 add() / toggle() 仍能工作，但初始类被清空了。更隐蔽的问题是：某些框架（如 Vue 的 v-bind:class）或内联 style 属性可能干扰 CSS 优先级，导致类加了但样式不体现。
- 调试建议：在控制台执行
el.classList查看实时类名数组，比看el.className更准 - 确保 CSS 规则没有拼写错误或被更高优先级样式覆盖（比如
!important或 ID 选择器） - 避免在事件回调里频繁调用
classList方法 —— 浏览器会合并重排，但逻辑混乱时容易漏状态
classList。动手前先想清楚这个类名代表的是瞬时反馈，还是持久状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
