classList切换类最稳妥，避免className全量赋值；CSS变量配合setProperty实现主题切换；getComputedStyle读计算样式但有陷阱；动画优先用transform+CSS过渡而非JS改left/top。
用 classList 切换 CSS 类是最稳妥的交互方式
直接操作 style 属性虽然快，但容易覆盖其他内联样式、难以复用、维护成本高。而通过 JS 控制预定义的 CSS 类，能天然解耦样式与逻辑。
常见错误是用 className 全量赋值，一不小心就把原有 class 冲掉了。
正确做法始终优先用 classList 的方法：
-
element.classList.add("active")—— 添加类，不干扰已有类 -
element.classList.toggle("hidden")—— 有则删、无则加，适合开关类交互 -
element.classList.contains("loading")—— 判断状态，比正则匹配className字符串更可靠 - 批量操作可用
classList.add("a", "b", "c")，但注意 IE10+ 才支持多参数
CSS 自定义属性（--my-color）配合 JS 实现动态主题切换
传统方案靠切换 class 或重写 style.cssText，但一旦主题变多，CSS 文件会膨胀，JS 也得硬编码颜色值。用 CSS 变量 + JS 赋值，样式逻辑留在 CSS，动态控制权交给 JS：
先在 :root 定义变量：
:root { --primary-color: #007bff; --bg-color: #fff; }再用 JS 修改：document.documentElement.style.setProperty('--primary-color', '#28a745');注意点：
- 变量名必须带
--前缀，且区分大小写 -
setProperty修改的是style属性，只影响当前元素及其后代，document.documentElement是全局生效最常用位置 - 不要用
getComputedStyle读取未声明的变量，会返回空字符串，建议 fallback：getComputedStyle(el).getPropertyValue('--color') || '#000'
用 getComputedStyle 读取真实渲染样式时的陷阱
很多人想用 JS 获取元素“最终显示的颜色/尺寸”，直接读 style.color，结果拿到空字符串——因为那只是内联样式。真正要读计算后值，得用 getComputedStyle：const color = getComputedStyle(el).color;
但要注意：
- 返回值永远是绝对单位（如
rgb(0, 123, 255)），不是原始 CSS 中写的#007bff或var(--primary) - 无法读取伪元素样式（
::before），需传第二个参数：getComputedStyle(el, '::before') - 在元素未挂载到 DOM 或
display: none时，部分属性（如height）可能返回auto，不可靠 - 性能敏感场景慎用，频繁调用会触发重排（reflow）
动画效果别用 JS 改 style.left/top，交给 transform + CSS 过渡
老式写法：el.style.left = x + 'px'; 配合 setInterval，卡顿明显、兼容性差、无法利用 GPU 加速。
现代做法是：JS 只负责加类或设 transform，动画由 CSS 管理：
.slide-in { transition: transform 0.3s ease; }
.slide-in.active { transform: translateX(0); }JS 触发：
el.classList.add('active');关键细节：
立即学习“前端免费学习笔记（深入）”；
- 必须用
transform（而非left）才能触发硬件加速，尤其在移动端 -
transition要写在初始类里（如.slide-in），不能只写在目标类（.active），否则首次添加类时无过渡 - 需要 JS 监听动画结束？用
el.addEventListener('transitionend', handler)，但注意它对每个可过渡属性都触发一次，需检查event.propertyName
:hover, :focus-within）完成的状态响应，硬塞进 JS 里监听和切换——这既增加 JS 负担，又削弱了可访问性和 CSS 的表达力。 
