JavaScript动态修改CSS核心是操作元素样式属性或CSS类：用element.style改内联样式（驼峰命名、需单位），用classList增删切换单个类更推荐，动态插入CSS规则适用于主题切换等进阶场景。
JavaScript中动态修改CSS，核心是操作元素的样式属性或CSS类，而不是直接改CSS文件。最常用、最直接的方式是通过element.style修改内联样式，或者用classList切换预定义的CSS类。
直接修改元素的style属性
每个DOM元素都有一个style对象，对应HTML中的style内联样式。它只读写内联样式（即元素标签里写的style="..."），不会影响外部CSS或
- 属性名用驼峰写法：比如
backgroundColor代替background-color，fontSize代替font-size - 值必须带单位（如
"20px"、"#333"），数字类型会自动转成字符串，但不加单位会失效 - 示例：
btn.style.color = "red"; btn.style.fontSize = "16px";
通过className或classList管理CSS类
更推荐的方式是预先在CSS中写好样式类，再用JS控制元素是否拥有该类。这样逻辑清晰、便于复用、也利于维护。
-
element.className = "active highlight"——会完全替换原有class，慎用 -
element.classList.add("active")——添加类（已存在也不报错） -
element.classList.remove("disabled")——移除类 -
element.classList.toggle("hidden")——有则删、无则加，适合开关类 -
element.classList.contains("loading")——判断是否存在某类，常用于条件逻辑
动态插入或修改全局CSS规则（进阶）
如果需要运行时新增整条CSS规则（比如主题色切换、暗黑模式注入新样式），可操作<style></style>标签或使用CSSStyleSheet.insertRule()。
立即学习“Java免费学习笔记（深入）”；
- 创建并追加style标签：
const style = document.createElement("style"); style.textContent = ".my-btn { background: blue; }"; document.head.appendChild(style); - 向现有样式表插入规则（需先获取sheet，注意浏览器兼容性）：
document.styleSheets[0].insertRule(".new { color: green; }", 0); - 这种方式灵活但不易调试，一般只在框架或主题系统中使用
基本上就这些。日常开发优先用classList配合CSS类；简单临时样式用style；全局规则变更才考虑动态插入style。不复杂但容易忽略细节，比如单位、驼峰命名、类名覆盖问题。
