JavaScript中的CSSOM与样式操作

CSSOM（CSS Object Model）是浏览器将CSS代码解析成的一种树状数据结构，它和DOM（文档对象模型）类似，但表示的是CSS样式规则和样式表。CSSOM与DOM结合形成渲染树，最终决定页面的视觉表现。

1. CSSOM的基本结构
CSSOM的核心是CSSStyleSheet接口，代表一个样式表（包括外部样式表、内部样式表和内联样式）。每个样式表包含多个CSSRule对象，常见的有：

• CSSStyleRule：普通CSS规则（如.class { color: red; }）
• CSSMediaRule：媒体查询规则
• CSSKeyframesRule：动画关键帧规则

2. 访问CSSOM的方法

• 通过document.styleSheets获取所有样式表：

  const sheets = document.styleSheets; // 返回StyleSheetList
  const firstSheet = sheets[0]; // 第一个样式表
  

• 遍历样式表中的规则：

  const rules = firstSheet.cssRules || firstSheet.rules; // 跨浏览器兼容
  const firstRule = rules[0]; // 第一个CSS规则
  

3. 读取和修改样式规则
以CSSStyleRule为例，它包含两个关键属性：

• selectorText：选择器文本（如".className"）
• style：样式声明对象（类似元素的style属性）

  const rule = rules[0];
  console.log(rule.selectorText); // 输出选择器
  rule.style.color = 'blue'; // 修改颜色
  rule.style.setProperty('font-size', '16px'); // 标准方法
  

4. 动态操作样式表

• 添加新规则：

  const sheet = document.styleSheets[0];
  sheet.insertRule('.new-class { color: red; }', sheet.cssRules.length);
  

• 删除规则：

  sheet.deleteRule(0); // 删除第一条规则
  

5. 元素样式操作
通过元素的style属性（属于CSSStyleDeclaration接口）直接操作内联样式：

const div = document.querySelector('div');
div.style.color = 'red'; // 设置样式
console.log(div.style.color); // 读取内联样式

注意：style对象只能获取内联样式，要获取最终计算样式需用：

const computedStyle = window.getComputedStyle(div);
console.log(computedStyle.color); // 获取最终渲染颜色

6. 性能优化注意事项

• 避免频繁修改样式：集中操作可使用classList或cssText

  div.style.cssText = 'color: red; font-size: 14px;'; // 批量设置
  

• 谨慎访问计算样式：getComputedStyle会触发重排，应缓存结果
• 使用requestAnimationFrame进行视觉变化优化

7. 实际应用场景

• 主题切换：通过修改CSS变量或切换样式表实现
• 动态样式：根据交互状态实时调整样式
• 样式分析：提取页面中的样式信息进行分析统计

理解CSSOM有助于更精细地控制页面样式，但需注意浏览器兼容性和性能影响，尤其是在动态操作样式时。