直接操作style属性适合动态设置少量样式；切换className或classList更易维护且支持动画；动态插入CSS规则适用于主题切换等场景；getComputedStyle用于读取最终计算样式。
直接操作元素的 style 属性是最常用、最直观的方式，适合动态设置单个或少量样式；更灵活的场景则推荐用 className 切换预定义 CSS 类，或通过 CSSOM API（如 insertRule）动态增删样式规则。
修改元素内联样式（style 属性）
每个 DOM 元素都有 style 属性，对应其 HTML 中的 style 特性。它是一个 CSSStyleDeclaration 对象，属性名采用驼峰写法（如 backgroundColor 而非 background-color）。
- 设置单个样式：
element.style.color = 'red'; - 设置带单位的值：
element.style.width = '200px';（注意：数字值不会自动加 px） - 移除某个样式：
element.style.removeProperty('opacity'); - 批量设置（可封装为函数）：
Object.assign(element.style, { opacity: 0.8, transform: 'scale(1.2)' });
切换 CSS 类名（className 或 classList）
比起逐个改 style，预先在 CSS 中定义好类（如 .highlight、.disabled），再用 JS 控制类的增删，更易维护、支持过渡动画、且不影响其他内联样式。
- 替换全部类名：
element.className = 'btn btn-primary active'; - 推荐使用
classList（更安全）：element.classList.add('active');、element.classList.remove('disabled');、element.classList.toggle('hidden'); - 检查是否存在某类：
element.classList.contains('error'); - 一次操作多个类：
element.classList.add('a', 'b'); element.classList.remove('c', 'd');
动态插入或修改全局样式规则
当需要运行时生成整套样式（比如主题色切换、根据屏幕尺寸注入媒体查询），可操作 标签或 CSSStyleSheet 对象。
- 向页面追加一个
标签：
const style = document.createElement('style');
style.textContent = '.theme-dark { background: #111; color: #fff; }';
document.head.appendChild(style); - 向现有样式表插入规则（兼容性注意）：
const sheet = document.styleSheets[0];
sheet.insertRule('.new-rule { display: none; }', sheet.cssRules.length); - 修改已有规则（需知道索引）：
sheet.cssRules[0].style.backgroundColor = '#eee';
使用 getComputedStyle 读取最终计算样式
修改样式后，若需获取浏览器实际应用的值（含继承、层叠、媒体查询生效后的结果），不能依赖 element.style.xxx（它只返回内联样式），而要用 getComputedStyle。
const computed = getComputedStyle(element);- 读取值：
computed.fontSize、computed.getPropertyValue('margin-top') - 注意：返回的是字符串（如
'16px'），且是只读对象，无法直接修改 - 常用于动画起止值计算、响应式逻辑判断等场景
基本上就这些。选哪种方法取决于你要改的是单个元素还是全局规则、是否需要复用、要不要动画支持——不复杂但容易忽略细节。
