深入理解 CSS 对象模型（CSSOM）

原创于 2025-03-22 10:22:14 发布 · 1.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 专栏收录该内容

6 篇文章

订阅专栏

在前端开发中，我们经常使用 JavaScript 操作 DOM（文档对象模型）来动态修改网页内容。但你是否知道，CSS 也有自己的对象模型 —— CSS 对象模型（CSSOM）？CSSOM 是浏览器用于操作 CSS 样式和规则的 API，它与 DOM 相辅相成，共同构建了现代网页的动态渲染能力。

本文将带你深入理解 CSSOM 的核心概念、使用方法以及实际应用场景。

什么是 CSSOM？

CSSOM（CSS Object Model）是浏览器将 CSS 样式表和规则解析为可编程对象的一种模型。它与 DOM 类似，但专注于 CSS 样式和规则的处理。通过 CSSOM，开发者可以动态地访问、修改和操作网页的样式。

CSSOM 的核心组成部分

StyleSheet 接口
表示一个样式表（如 <style> 或 <link> 标签引入的样式表）。可以通过 document.styleSheets 访问文档中的所有样式表。
CSSStyleSheet 接口
继承自 StyleSheet，表示一个 CSS 样式表。提供了 cssRules 或 rules 属性，用于访问样式表中的所有 CSS 规则。
CSSRule 接口
表示一个 CSS 规则（如样式规则、媒体查询规则等）。常见的子接口包括：
- CSSStyleRule：表示普通的 CSS 样式规则（如 div { color: red; }）。
- CSSMediaRule：表示媒体查询规则（如 @media screen and (max-width: 600px)）。
CSSStyleDeclaration 接口
表示一组 CSS 样式声明（如 color: red; font-size: 14px;）。可以通过 element.style 访问元素的样式，或者通过 CSSStyleRule.style 访问规则中的样式。
MediaList 接口
表示与样式表关联的媒体查询列表。
CSSKeyframesRule 和 CSSKeyframeRule 接口
用于操作 CSS 动画中的关键帧规则（@keyframes）。

CSSOM 的实际应用

1. 访问和修改样式表

通过 document.styleSheets，我们可以访问文档中的所有样式表，并动态修改其中的规则。

// 获取文档中的所有样式表
const styleSheets = document.styleSheets;

// 遍历样式表
for (let sheet of styleSheets) {
  console.log(sheet.href); // 打印样式表的 URL（如果是外部样式表）
}

2. 动态添加样式规则

使用 insertRule 方法，我们可以动态地向样式表中添加新的 CSS 规则。

// 获取第一个样式表
const styleSheet = document.styleSheets[0];

// 插入新规则
styleSheet.insertRule("body { background-color: yellow; }", 0);

3. 修改元素的样式

通过 element.style，我们可以直接操作元素的样式。

// 获取元素
const element = document.querySelector("div");

// 修改元素的样式
element.style.backgroundColor = "green";
element.style.fontSize = "20px";

4. 操作 CSS 动画

CSSOM 还提供了对 CSS 动画的支持。例如，我们可以动态修改 @keyframes 规则。

// 获取样式表中的关键帧规则
const styleSheet = document.styleSheets[0];
const cssRules = styleSheet.cssRules;

for (let rule of cssRules) {
  if (rule instanceof CSSKeyframesRule) {
    console.log(rule.name); // 打印动画名称
    rule.appendRule("50% { transform: rotate(180deg); }"); // 添加关键帧
  }
}