typed om是cssom的现代替代方案，通过attributestylemap/computedstylemap提供类型化值对象（如cssunitvalue），支持类型安全、可运算、高性能的样式操作，但需避免字符串传参、属性名驼峰化，并注意chrome/edge原生支持而safari/firefox需polyfill。
Typed OM 不是“创建”出来的样式类型，而是 CSSOM 的现代替代方案，它让 JavaScript 操作样式时能拿到带类型（如 CSSUnitValue、CSSKeywordValue）的值对象，而不是字符串。直接用 element.style 或 getComputedStyle 返回的仍是旧式 CSSOM，必须通过 attributeStyleMap 或 computedStyleMap 才能进入 Typed OM。
怎么用 attributeStyleMap 设置带类型的样式值
这是最常用的 Typed OM 入口，对应元素的内联样式（style 属性），写入即生效且类型安全：
-
element.attributeStyleMap.set()必须传入CSSNumericValue、CSSKeywordValue等实例，不能传字符串 —— 传"20px"会静默失败或抛TypeError - 常用构造函数：
CSS.px(20)、CSS.percent(50)、CSS.em(1.2)（需确保已加载css-typed-om或在支持浏览器中运行） - 注意单位缩写：用
CSS.deg(45)，不是CSS.degree(45)；CSS.ms(300)表示毫秒，不是CSS.s(0.3)（两者等价但类型不同） - 复合属性如
border不支持直接设，得拆成borderWidth、borderStyle等子属性
element.attributeStyleMap.set('font-size', CSS.px(16));
element.attributeStyleMap.set('opacity', CSS.number(0.8));
computedStyleMap 返回的是只读 Typed OM 值
它替代 getComputedStyle，返回的每个值都是类型化对象，但不可写，适合读取和计算：
- 返回值是
Map，键为驼峰 CSS 属性名（fontSize），值为CSSStyleValue子类实例 - 数值型值（如长度、时间）通常是
CSSUnitValue，可用.value和.unit访问（computedStyleMap.get('width').value === 320，.unit === 'px'） - 关键字值（如
display: flex）是CSSKeywordValue，其.value是字符串"flex" - 不支持简写属性：查
margin会返回undefined，必须用marginTop、marginBottom等长名
const style = element.computedStyleMap();
const width = style.get('width');
if (width && width.value !== undefined) {
console.log(width.value, width.unit); // 例如 320, "px"
}
常见错误：TypeError: Failed to execute 'set' on 'CSSStyleValueMap'
这个错误几乎都源于传了非法类型给 attributeStyleMap.set()：
- 传了字符串（
element.attributeStyleMap.set('color', '#fff')）→ 改用CSS.unparsed('#fff') - 传了普通数字（
CSS.px("20")传字符串 → 应传数字CSS.px(20)） - 浏览器不支持：Chrome 85+、Edge 85+ 原生支持；Safari 和 Firefox 仍无原生支持，需用 polyfill，但 polyfill 无法覆盖
computedStyleMap - 拼错属性名：Typed OM 使用驼峰名（
backgroundColor），不是短横线（background-color），后者会静默忽略
Typed OM 的真正价值不在“创建类型”，而在把样式操作从字符串拼接推进到可验证、可运算、可调试的层面——但前提是所有参与方（设置、读取、计算）都走 Typed OM 路径，混用旧式 style.cssText 或字符串赋值会立刻打破类型链。兼容性仍是硬门槛，生产环境建议只在明确支持的 Chrome/Edge 中启用，并保留降级逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
