必须用 CSSUnitValue 实例(如 CSS.px(100))才能启用 Typed OM 类型计算,字符串赋值不触发单位解析;加减乘除需用 CSSMathSum 等构造函数,computedStyleMap 值只读不可修改。

attributeStyleMap.set 传 CSSUnitValue 才算真正启用类型计算
直接写 element.style.width = '100px' 或用字符串调 attributeStyleMap.set('width', '100px') 都不会触发 Typed OM 的单位计算能力——值会静默转为字符串,后续无法做加减、单位换算。必须显式构造 CSSUnitValue 实例,比如 CSS.px(100)、CSS.em(1.5),才能让浏览器识别为可运算的类型化值。
常见错误现象:attributeStyleMap.set('width', '100px') 看似生效,但 attributeStyleMap.get('width').value 是 undefined,.unit 也是 undefined;而用 CSS.px(100) 后,.value 是数字 100,.unit 是字符串 "px"。
-
CSS.px(100)、CSS.percent(80)、CSS.ms(200)是最常用构造方式,单位名必须严格匹配(如不能写CSS.millisecond(200)) - 不支持复合单位(如
calc(100px - 2em)),也不能传带单位的字符串("100px") - 注意 Safari 15.4+、Chrome 85+、Edge 85+ 原生支持;Firefox 目前仍需 polyfill(如
css-typed-om)
用 CSSUnitValue.value 和 CSSUnitValue.unit 拆解并安全转换单位
CSSUnitValue 实例不是“原始数字”,它把数值和单位分开放在 .value 和 .unit 两个属性里。这意味着你不能直接拿它参与算术,必须先确认单位是否兼容——比如 px 和 em 不能直接相加,但 px 和 rem 在已知根字体大小时可通过计算对齐。
典型使用场景:动态调整尺寸时保持比例,或响应式缩放中统一转为视口单位。
立即学习“前端免费学习笔记(深入)”;
- 获取当前值:
const w = element.attributeStyleMap.get('width');,再判断w instanceof CSSUnitValue才能安全访问.value - 单位一致性检查:
w.unit === 'px'成立才可与另一个px值相加;否则需手动换算(例如查getComputedStyle获取font-size再算em → px) - 不要依赖
.toString()——它返回类似"100px"的字符串,丢失类型信息,也破坏后续计算链
加减乘除必须用 CSSMathValue,不能直接用 + - * /
CSSUnitValue 本身不支持 + 或 * 运算符。想做 100px + 2em 或 50% * 2,必须用 CSSMathSum、CSSMathProduct 等构造函数包装,最终再塞回 attributeStyleMap.set。
错误做法:const a = CSS.px(100); const b = CSS.em(2); const sum = a.value + b.value; ——这纯属数字相加,完全忽略单位语义,结果毫无意义。
- 正确加法:
CSSMathSum(CSS.px(100), CSS.em(2)) - 正确乘法:
CSSMathProduct(CSS.percent(50), CSS.number(2))(注意CSS.number(2)不是数字2) - 所有
CSSMath*构造结果仍是类型化对象,可继续参与下一轮计算,也能被浏览器原生解析为calc()表达式 - 不支持除法直接写
/,要用CSSMathProduct(val, CSS.number(1 / x))
computedStyleMap 返回的 CSSUnitValue 是只读的,别试图 set
element.computedStyleMap().get('width') 返回的 CSSUnitValue 是只读快照,它的 .value 和 .unit 可读,但调 .set() 会报 TypeError: Cannot set property。这是设计使然——它只用于观察,不用于修改。
容易踩的坑:拿到 computed 值后想“顺手改一下再设回去”,结果发现没反应或报错。必须用 attributeStyleMap 或 CSS 变量(--my-width)配合 @property 注册来实现可变样式。
- 读取用
computedStyleMap,写入用attributeStyleMap,二者职责分明 - 若需基于 computed 值做运算后再写入,先解构出
.value和.unit,构造新CSSUnitValue或CSSMathValue,再set - 注意
computedStyleMap不支持简写属性(margin),必须用marginTop、marginBottom等长名
Typed OM 的单位计算不是“自动聪明”,它把类型和单位显式暴露出来,意味着你得自己决定何时换算、何时禁止混用。最常被忽略的一点:没有运行时单位自动归一化——px 加 rem 不会自动转成同一单位,它要么报错,要么生成一个 calc() 表达式交由 CSS 引擎处理。



















