直接改元素的style属性最快最直接，适合单个元素即时调整；classList切换预设样式更可控；动态插入CSS规则适用于运行时生成整套样式；CSS变量配合JS修改最灵活。
直接改元素的 style 属性最常用
这是最快、最直接的方式，适合单个元素的即时样式调整。浏览器会把修改立即应用到渲染树，无需重载或触发重排以外的额外开销。
注意：style 只能设置内联样式，且 CSS 属性名要转成驼峰写法（比如 background-color → backgroundColor）：
const el = document.getElementById('myDiv');
el.style.color = 'red';
el.style.fontSize = '16px';
el.style.backgroundColor = '#f0f0f0';
常见坑：
-
el.style.display = 'none'会覆盖所有 display 相关的 CSS 类设置，且后续靠 class 切换可能失效 - 设置
width或height时，漏写单位（如el.style.width = 200）会导致无效，必须是'200px'或'auto' - 读取
el.style.xxx只能拿到内联样式值，拿不到 CSS 文件或里定义的值
用 className 或 classList 切换预设样式更可控
当样式逻辑较复杂（比如主题切换、状态高亮），硬编码 style 容易失控。此时应提前在 CSS 中写好类，再用 JS 控制开关。
立即学习“Java免费学习笔记（深入）”；
classList 是推荐做法，支持原子操作：
const btn = document.querySelector('.submit-btn');
btn.classList.add('loading'); // 添加
btn.classList.remove('disabled'); // 移除
btn.classList.toggle('active'); // 切换
btn.classList.contains('error'); // 判断
对比 className（直接赋值字符串）：
-
el.className = 'a b c'会完全覆盖原有 class，容易误删 -
classList是安全的增量操作，不干扰其他类名 - IE10+ 支持
classList；如需兼容 IE9，可用className+ 字符串拼接（但务必去重）
动态插入 CSS 规则要用 document.styleSheets
适用于运行时生成整套样式（比如暗色模式媒体查询、按尺寸注入响应式规则），而不是改某个元素。
关键限制：只能操作同源的 或 加载的样式表，且多数浏览器禁止跨域样式表写入。
简单示例（向第一个 插入规则）：
const sheet = document.styleSheets[0];
sheet.insertRule('.dynamic-highlight { background: yellow; }', sheet.cssRules.length);
注意点：
-
insertRule第二个参数是插入位置索引，不是“追加”；用sheet.cssRules.length才等效于 append - Chrome/Firefox 支持，但 Safari 对
insertRule的错误提示极不友好（常静默失败） - 大量动态规则会影响 CSSOM 查找性能，别在循环里反复调用
用 CSS Custom Properties（CSS 变量）配合 JS 最灵活
现代方案：把可变样式抽成 CSS 变量，JS 只负责改根节点或局部作用域的变量值，所有依赖它的元素自动响应。
CSS 中定义：
:root {
--primary-color: #007bff;
--border-radius: 4px;
}
JS 修改：
document.documentElement.style.setProperty('--primary-color', '#28a745');
// 或限定在某个容器内
someDiv.style.setProperty('--border-radius', '8px');
优势明显：
- 一次修改，多处生效（所有用到
var(--primary-color)的地方） - 支持动画过渡（
transition: --primary-color 0.3s） - 避免操作 DOM 样式带来的频繁重排，性能更稳
- 和 dark mode、theme 切换天然契合
唯一要注意的是，setProperty 的值必须是字符串，数字要手动转（String(val) 或模板字面量）。
真正难的不是怎么改样式，而是决定该在哪一层改：临时状态用 style，语义化状态用 classList，全局主题或设计系统级变量才动 CSS Custom Properties。选错层级，后期维护成本会指数上升。
