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;
但要注意：
