CSS Academy · 课时

CSS 类型对象模型（OM）

Q: 「CSS 类型对象模型（OM）」这节课中我会学到什么？

使用 CSS 类型 OM API，将 CSS 值作为具有类型的 JavaScript 对象而不是字符串进行处理。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS 类型 OM API，将 CSS 值作为具有类型的 JavaScript 对象而不是字符串进行处理。

CSS 类型对象模型（OM） 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 CSS 类型化对象模型

CSS 类型化对象模型（类型化 OM）是 CSS Houdini 项目的一部分。它将 CSS 值公开为带类型的 JavaScript 对象，而不是普通字符串，从而支持更快速的操作、更丰富的算术运算和类型安全。

旧方式与新方式

传统 CSSOM 返回字符串；类型化 OM 返回带有类型信息的对象：

<p id="demo" style="opacity: 0.5;">Typed OM demo element</p>
<p id="output">Reading style values&hellip;</p>
<script>
  const demo = document.getElementById('demo');
  const output = document.getElementById('output');

  // Old CSSOM (string)
  const oldValue = demo.style.opacity; // '0.5'

  // CSS Typed OM (typed object)
  const typed = demo.computedStyleMap().get('opacity');
  // CSSUnitValue { value: 0.5, unit: 'number' }

  output.textContent = 'old (string): "' + oldValue + '"  |  typed OM: value=' + typed.value + ', unit=' + typed.unit;
</script>

computedStyleMap()

访问任意元素的计算后类型化值：

<div id="box">400px wide box</div>
<p id="output">Reading computed width&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  const styles = box.computedStyleMap();
  const width = styles.get('width');
  console.log(width.value); // 400
  console.log(width.unit);  // 'px'

  output.textContent = 'width.value = ' + width.value + ', width.unit = "' + width.unit + '"';
</script>

用于内联样式的 attributeStyleMap

通过 element.attributeStyleMap 设置和获取类型化的内联样式值：

<div id="box">Inline-styled box</div>
<p id="output">Setting styles via attributeStyleMap&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  box.attributeStyleMap.set('opacity', CSS.number(0.5));
  box.attributeStyleMap.set('margin-top', CSS.px(16));

  const opacity = box.attributeStyleMap.get('opacity');
  output.textContent = 'opacity.value = ' + opacity.value;
</script>

CSS 数值工厂方法

CSS 命名空间提供了用于创建类型化值的工厂方法：

<div id="box">Factory methods demo</div>
<p id="output">Computing&hellip;</p>
<script>
  const output = document.getElementById('output');

  const px = CSS.px(100);         // CSSUnitValue(100, 'px')
  const percent = CSS.percent(50); // CSSUnitValue(50, 'percent')
  const em = CSS.em(1.5);          // CSSUnitValue(1.5, 'em')
  const number = CSS.number(0.5);  // CSSUnitValue(0.5, 'number')
  const deg = CSS.deg(180);        // CSSUnitValue(180, 'deg')

  output.textContent = [px, percent, em, number, deg]
    .map(v => v.value + v.unit).join(', ');
</script>

对类型化值执行算术运算

CSS 数学值可以在 JavaScript 中执行 CSS 数学运算，无需拼接字符串：

<div id="box">Math on typed values</div>
<p id="output">Calculating&hellip;</p>
<script>
  const output = document.getElementById('output');

  const width = CSS.px(100).add(CSS.percent(10));
  // Equivalent to calc(100px + 10%)

  const margin = CSS.px(16).mul(2);
  // 32px

  output.textContent = 'width = ' + width.toString() + '  |  margin = ' + margin.value + margin.unit;
</script>

性能优势

对于频繁操作（例如动画帧），类型化 OM 的速度明显快于基于字符串的 CSSOM。访问值时无需每次都从字符串解析，因为这些值已经是结构化对象。

CSS 样式值类型

类型化 OM 的值类型包括：

CSSUnitValue：数值 + 单位（100px）
CSSKeywordValue：关键字（auto、none）
CSSImageValue：图像（url()）
CSSMathValue：calc 表达式
CSSColorValue：颜色值（实验性）

动画中的类型化 OM

在 Web 动画接口中，使用类型化值可以更精确地控制动画：

<div id="box">Animated via Typed OM</div>
<script>
  const box = document.getElementById('box');
  box.animate(
    [{ opacity: CSS.number(0) }, { opacity: CSS.number(1) }],
    { duration: 300, fill: 'forwards' }
  );
</script>

浏览器支持情况

CSS 类型化 OM（第 1 级）受到 Chrome 66 及更高版本、Edge 79 及更高版本的支持。Firefox 和 Safari 的支持不完整，或需要启用标志。用于生产环境前，请查看 caniuse.com。该接口仍在不断扩展。

何时使用类型化 OM

在以下情况下请使用类型化 OM：

构建 CSS 绘制或布局工作单元（必需）
在 JavaScript 中每帧为大量元素制作动画
构建 CSS 工具或预处理器
需要对 CSS 值进行类型检查和操作

快速检查

与 getComputedStyle(element).width 相比，element.computedStyleMap().get("width") 会返回什么？

回顾

CSS 类型化 OM 用类型化 JavaScript 对象取代了基于字符串的 CSSOM。请使用 computedStyleMap() 读取值，使用 attributeStyleMap 写入内联样式。CSS 工厂方法（CSS.px()、CSS.percent()）可以创建类型化值。该接口比基于字符串的操作更快，也是绘制和布局工作单元所必需的。

常见问题解答

「CSS 类型对象模型（OM）」课时是免费的吗？

是的 — 「CSS 类型对象模型（OM）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「CSS 类型对象模型（OM）」这节课中我会学到什么？

使用 CSS 类型 OM API，将 CSS 值作为具有类型的 JavaScript 对象而不是字符串进行处理。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「CSS 类型对象模型（OM）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy