JavaScript动态改样式有三条路径：直接修改元素style对象适用于临时单次内联控制；切换className适合复用、可维护及响应式场景；操作CSSStyleSheet规则适合运行时生成主题或全局变量注入。
JavaScript 动态改样式，核心就三条路：改元素的 style 对象、切换 className、操作 CSSStyleSheet 规则。选哪条，取决于你改的是单个元素还是全局规则，以及是否需要响应式或复用。
直接改 style 属性——适合临时、单次、内联控制
这是最直白的方式，本质是操作 DOM 元素的 style 属性（即内联样式），优先级最高，会覆盖 CSS 文件里的同名规则。
- 注意驼峰命名：
backgroundColor而不是background-color；zIndex而不是z-index - 值必须带单位（除
0）：el.style.width = '200px'，写'200'无效 - 读取时只能拿到内联样式，无法读取 CSS 文件或
<style>里定义的值（要用getComputedStyle()） - 批量设置不推荐链式赋值，容易出错；可封装对象批量写入，或用
Object.assign(el.style, {...})
const btn = document.querySelector('button');
btn.style.backgroundColor = '#4a90e2';
btn.style.padding = '10px 20px';
btn.style.borderRadius = '4px';
切换 className——适合复用、可维护、响应式场景
通过增删 class 控制样式，把样式逻辑交给 CSS，JS 只管状态。这是最推荐的主流做法，尤其在组件化或状态驱动 UI 中。
- 用
element.classList.add()/.remove()/.toggle()/.contains()，比直接拼字符串安全得多 - 避免手写
el.className += ' active'，容易重复或污染（比如多次加同一个类） - 多个类可一次传入：
el.classList.add('active', 'highlight') - 配合 CSS 的
:not()、[data-state]或 BEM 命名，能清晰表达状态与样式的映射
const card = document.querySelector('.card');
card.classList.add('is-loaded');
card.classList.remove('is-pending');
card.classList.toggle('is-expanded'); // 切换开关
动态插入或修改 CSSStyleSheet 规则——适合运行时生成主题、暗色模式、或全局变量注入
这种操作绕过 HTML 结构，直接改样式表本身，影响范围大，但灵活性高。常用于主题切换、CSS 自定义属性注入、或按需加载样式规则。
立即学习“Java免费学习笔记（深入）”；
- 获取
<style>标签后，用sheet.insertRule()添加新规则（注意浏览器兼容性，IE 需用addRule()） - 修改已有规则：用
sheet.cssRules[i].style.setProperty()（如改--primary-color） - 优先操作已存在的
<style id="theme-styles">，别每次新建<style>标签，避免内存泄漏和规则冗余 - 修改 CSS 变量（
custom properties）最常用方式是改根元素：document.documentElement.style.setProperty('--color-bg', '#222')，更轻量且无需访问 sheet
const style = document.getElementById('theme-styles').sheet;
style.insertRule('.btn { border: 2px solid var(--accent); }', style.cssRules.length);
为什么不用 setAttribute('style', ...)？
它会完全覆盖原有内联样式，哪怕你只想改一个属性。比如原本有 style="color:red; font-size:14px"，执行 setAttribute('style', 'margin: 8px') 后，前面两个样式全丢。而 el.style.margin = '8px' 只动 margin，其余保留。
真正复杂的样式逻辑（比如动画触发、响应式断点、主题嵌套）几乎都靠 class 切换或 CSS 变量驱动；硬编码 style 值只适合调试或极简交互。别让 JS 承担本该由 CSS 完成的职责。
