本文将深入探讨如何使用 JavaScript 动态操作元素的 CSS 样式，涵盖从基础操作到高级技巧，并融合了性能优化与最佳实践建议。
一、基础操作：`element.style` 属性
`element.style` 是最直接操作元素内联样式的方式：
javascript
const myDiv = document.getElementById('myDiv');
// 设置单个样式属性
myDiv.style.color = 'blue';
myDiv.style.fontSize = '16px'; // 注意使用驼峰命名
// 批量设置样式 (较少使用)
myDiv.style.cssText = 'color: red; font-weight: bold; background: eee;';
深入理解与建议：
内联样式优先级： `style` 属性设置的样式拥有最高优先级（除 `!important` 外），可能导致难以覆盖。
适用场景： 适合动态性强、需要精确控制且无需复用的样式（如拖拽元素的位置）。
缺点： 混合样式与逻辑，降低可维护性；无法操作伪元素样式。
二、操作类名：更强大的 `classList` API
通过增删 CSS 类名批量应用/移除样式是现代开发首选：
javascript
const button = document.querySelector('.btn');
// 添加类
button.classList.add('active', 'highlighted');
// 移除类
button.classList.remove('inactive');
// 切换类 (存在则移除，不存在则添加)
button.classList.toggle('is-hidden');
// 检查类是否存在
if (button.classList.contains('warning')) {
console.log('警告状态按钮');
深入理解与建议：
关注点分离： 样式定义保留在 CSS 中，JS 仅控制状态切换，代码更清晰。
性能优化： 修改类名触发一次样式计算，比逐条修改 `style` 更高效。
框架集成： Vue/React 等框架的 `:class` 或 `className` 本质也是操作类名。
进阶技巧： 结合 CSS 变量（`primary-color`）在类中定义，实现主题切换等复杂效果。
三、操作 CSS 变量（自定义属性）
CSS 变量可通过 JS 动态更新，影响依赖该变量的所有样式：
html
javascript
// 获取根元素（或任意父元素）
const root = document.documentElement;
// 修改变量值
root.style.setProperty('main-bg-color', 'lightblue');
// 读取变量值 (注意：返回计算值)
const bgColor = getComputedStyle(root).getPropertyValue('main-bg-color');
深入理解与建议：
动态主题核心： 结合类名切换与变量修改，轻松实现深色模式等主题切换。
作用域控制： 变量可在 `:root`（全局）或元素上定义，实现局部样式控制。
响应式增强： 通过 JS 监听窗口大小，动态修改变量值，实现更灵活的响应式设计。
四、高级技巧：访问计算样式与操作全局样式表
1. 获取计算样式：
javascript
const element = document.getElementById('content');
const computedStyle = window.getComputedStyle(element);
// 获取最终生效的样式值（只读）
const width = computedStyle.width;
const fontSize = computedStyle.getPropertyValue('font-size');
2. 操作全局样式表：
javascript
// 获取第一个样式表
const styleSheet = document.styleSheets[0];
// 插入新规则 (兼容性处理省略)
styleSheet.insertRule('.new-rule { color: green; }', styleSheet.cssRules.length);
// 删除规则
styleSheet.deleteRule(0);
// 遍历修改规则
for (let rule of styleSheet.cssRules) {
if (rule.selectorText === '.old-rule') {
rule.style.color = 'purple'; // 修改已有规则
深入理解与建议：
计算样式只读： `getComputedStyle` 返回的是最终渲染值，不可直接修改。
操作样式表谨慎： 直接操作 `CSSStyleSheet` 对象功能强大但易引发性能问题或冲突，非必要不推荐使用。
替代方案： 动态创建 `