直接修改 element.style 仅影响内联样式且需驼峰命名；推荐用 classList 管理样式类；动态插入 CSS 规则应操作 CSSStyleSheet；修改 CSS 变量需注意作用域与继承。
直接改 element.style 是最常用也最容易出错的方式
绝大多数人第一反应是写 element.style.color = 'red'，这确实能生效，但只对「内联样式」起作用，且所有 CSS 属性名必须转成驼峰形式（比如 background-color → backgroundColor，font-size → fontSize）。
容易踩的坑：
-
style只读取和设置元素自身的style属性，不反映 CSS 类或外部样式表定义的值（比如你用getComputedStyle能拿到最终渲染值，但element.style.width可能为空字符串） - 一次性设多个样式时，重复写
.style.xxx很啰嗦；用Object.assign(element.style, { color: 'red', fontSize: '14px' })更简洁，但注意 IE 不支持Object.assign - 设
display: none后再想通过style.display = ''恢复原值？不行——空字符串不会回退到 CSS 类里的值，得先存原始值或用removeProperty('display')
用 classList 切换 CSS 类才是推荐做法
只要样式逻辑能被抽象成「有/无某类」，就该优先用 element.classList.add()、.remove()、.toggle() 或 .replace()。它不污染内联样式，可复用 CSS 规则，也方便维护。
实操建议：
-
element.classList.toggle('active', condition)比手写if/else更安全，避免状态错位 - 批量操作多个类：用展开语法
element.classList.add(...['a', 'b', 'c'])，或传多个参数.add('a', 'b', 'c') - IE10+ 支持
classList；若需兼容 IE9，可用className字符串拼接，但要小心重复添加或漏删 - 不要用
element.className = 'new-class'全量覆盖——会把其他类全干掉
动态插入 CSS 规则要用 insertRule，不是改 style 标签内容
如果要全局生效新样式（比如暗色主题切换、运行时生成主题色变量），不能靠反复改某个 标签的 textContent（性能差、难维护），而应操作 CSSStyleSheet 对象。
关键步骤：
- 先获取目标
元素的sheet属性：const styleEl = document.getElementById('dynamic-styles'); const sheet = styleEl.sheet; - 用
sheet.insertRule('.btn { background: #007bff; }', sheet.cssRules.length)插入规则（第二个参数是插入位置索引） - 删除规则用
sheet.deleteRule(index)；查已有规则用sheet.cssRules - 注意：Chrome/Firefox 支持，但 IE 需用
addRule（已废弃）；Safari 15.4+ 才支持insertRule的完整语法（含媒体查询）
修改 CSS 自定义属性（--xxx）要走 :root 或父元素
现代项目大量依赖 CSS 变量做主题控制，修改它们不能直接写 document.documentElement.style.setProperty('--primary-color', '#ff6b6b') —— 这样写是对的，但要注意作用域。
常见场景与要点：
- 全局变量：设在
:root，用document.documentElement.style.setProperty('--color-text', '#333') - 局部变量：设在某个容器元素上，后续子元素用
var(--color-tex就会继承该值
t)
- 读取变量值要用
getComputedStyle：getComputedStyle(document.documentElement).getPropertyValue('--color-text')，注意返回带空格的字符串（如" #333 "） - 变量名大小写敏感，
--MainColor和--maincolor是两个不同变量
const root = document.documentElement;
root.style.setProperty('--theme-bg', '#f8f9fa');
root.style.setProperty('--theme-text', '#212529');
CSS 变量的动态更新看似简单，但真正在复杂组件树里调试样式继承链时，getComputedStyle 返回的值和实际渲染不一致，往往是因为变量没在正确的作用域里声明，或者被更高优先级的规则覆盖了——这时候光看 JS 代码没用，得打开开发者工具的「Computed」面板逐层点开看来源。
