推荐使用 classList.toggle() 替代 style.display 控制显隐，因其不覆盖原始 display 值（如 flex/grid），避免布局错乱，且样式逻辑交由 CSS 管理，JS 仅负责语义化开关。
classList.toggle()是实现点击切换 CSS 类名最直接、最可靠的方式，不需要额外状态变量，也不依赖事件次数计数。
为什么不用 style.display 直接控制显隐？
直接写 element.style.display = 'none' 会覆盖元素原本的 display 值（比如 flex 或 grid），下次想恢复时得记住原始值；而类名切换把样式逻辑完全交给 CSS 管理，JS 只管“开/关”语义。
- 如果目标元素默认是
display: flex，用display = 'block'强制恢复会导致布局错乱 -
classList.toggle('hidden')配合 CSS 中的.hidden { display: none; }，语义清晰、无副作用 - 多个状态可叠加：一个元素可以同时有
active、loading、error等类，互不干扰
classList.toggle() 的第二个参数怎么用？
它叫 force，是个布尔值，用于绕过“自动判断”，强制添加或移除：
-
el.classList.toggle('active', true)→ 一定添加，不管原来有没有 -
el.classList.toggle('active', false)→ 一定移除，哪怕原来就没有（静默失败，无报错） - 日常切换状态几乎用不到
force；它更适合初始化逻辑，比如页面加载后根据 localStorage 强制设为 dark 模式：document.documentElement.classList.toggle('dark', savedTheme === 'dark')
批量切换多个类时，为什么不能用 className 字符串拼接？
element.className = 'a b c' 是覆盖写入，会清空所有已有 class —— 如果元素原本带 js-initialized 或 data-loaded 这类功能性 class，一赋值就丢了，JS 行为可能中断。
- 错误示例：
btn.className += ' active highlighted'→ 容易重复添加、空格混乱、难以清理 - 正确做法：用数组管理类名，循环调用
toggle()：['active', 'highlighted', 'pulse'].forEach(c => el.classList.toggle(c)) - 若需“全开”或“全关”，改用
add()或remove()，但记得传展开的参数：el.classList.add(...classes)（ES6 展开语法必需）
主题切换必须操作 document.documentElement 还是 document.body？
取决于你的 CSS 主题选择器写在哪儿：
- 如果 CSS 写的是
body.dark .button→ 必须用document.body.classList.toggle('dark') - 如果写的是
html.dark .card或:root.dark→ 必须用document.documentElement.classList.toggle('dark') - 混用会失效：在
body上加dark类，但 CSS 规则是针对html.dark，那整个主题根本不会生效 - 检查方式：打开 DevTools，看当前生效的主题规则前面是
body还是html，别猜
实际中最容易被忽略的一点：类名切换本身不触发重排（reflow），但如果你在对应 CSS 里改了 height、width 或 display，浏览器就得重新计算布局。要动画平滑，优先用 transform 和 opacity 这类只触发重绘（repaint）或合成（composite）的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
