最常用且最直接的方式是操作元素的style属性或切换css类名；推荐优先用classlist切换预设类控制样式，仅在需动态计算或临时调整时才直接改内联style，注意驼峰命名、显式单位及用getcomputedstyle读取真实样式。
JavaScript 中动态修改元素样式，最常用也最直接的方式是操作元素的 style 属性或切换 CSS 类名。关键在于：优先用 class 控制样式，只在需要精细、临时或计算式调整时才直接改内联 style。
通过 className 或 classList 切换 CSS 类（推荐）
这是最符合工程规范的做法——把样式逻辑交给 CSS，JS 只负责控制状态。避免样式散落在 JS 里，便于维护和复用。
- 用 element.className = "xxx" 完全覆盖类名（慎用，会清空原有类）
- 用 element.classList.add("active") 添加类
- 用 element.classList.remove("hidden") 移除类
- 用 element.classList.toggle("selected") 切换开关类
- 用 element.classList.contains("disabled") 判断是否具备某类
直接设置内联样式（style 属性）
适用于需动态计算数值（如拖拽位置、动画进度）、或仅临时生效的样式。注意：CSS 属性名要转为驼峰写法（如 backgroundColor，不是 background-color）。
- 单个属性：elem.style.color = "red" 或 elem.style.fontSize = "16px"
- 批量设置：Object.assign(elem.style, { opacity: 0.8, transform: "scale(1.1)" })
- 清除某个内联样式：elem.style.color = ""（设为空字符串即可回退到 CSS 规则）
读取当前计算样式（getComputedStyle）
如果要根据当前样式做后续判断（比如判断是否显示、获取真实宽高），不能依赖 elem.style.xxx（它只读内联样式），而要用 window.getComputedStyle()。
- const computed = getComputedStyle(elem) 返回一个只读对象
- 读取值：computed.width、computed.backgroundColor（返回 RGB 字符串）
- 注意：该方法返回的是最终生效的样式，包含继承、层叠、浏览器默认等结果
避免常见坑
直接操作 style 容易踩坑，比如单位遗漏、属性名写错、覆盖其他样式等。
- 不要漏单位：elem.style.width = "200" ❌ → 应写 "200px" ✅（数字+px、%、em 等）
- 不要用短横线：elem.style.background-color ❌ → 必须写 backgroundColor ✅
- 内联样式优先级最高，会覆盖 CSS 文件中的规则，调试时注意审查元素中的 strike-through 样式
- 批量修改多个样式时，频繁赋值 style.xxx 可能触发多次重排，建议用 cssText 或一次性 Object.assign
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
