Typed OM 需先检测 attributeStyleMap 是否可用，确保 HTTPS/localhost 环境、元素已挂载且为真实 DOM；CSSNumericValue.add() 仅支持同类单位或无量纲值运算；computedStyleMap.get() 返回只读值，不可直接调用 add()。
attributeStyleMap.set() 之前必须确认 Typed OM 可用
直接在 <script> 里调用 element.attributeStyleMap.set() 很可能报 TypeError: Cannot read property 'set' of undefined——这不是你代码写错了，而是浏览器根本没暴露这个 API。Typed OM 不是默认开启的特性，尤其在 Safari 和旧版 Chrome 中需要手动启用试验性功能。
运行这段检查逻辑再操作：
if ('attributeStyleMap' in document.body) {
const el = document.querySelector('#myEl');
el.attributeStyleMap.set('width', CSS.px(200));
} else {
console.warn('Typed OM not available — falling back to style.width');
}
注意三个硬性前提：
- 页面必须运行在
https://或localhost（file://协议下多数浏览器禁用 Houdini API） - 元素必须已挂载到 DOM，且不能是
innerHTML插入后立刻调用（需确保渲染完成） - 不能用框架虚拟节点（如 React 的
ref），必须是真实 DOM 元素
CSSNumericValue.add() 只能对同类单位或无量纲值运算
CSSNumericValue.add() 不是字符串拼接，也不是任意单位混算。它要求参与运算的两个值类型兼容：要么都是带单位的 CSSUnitValue（且单位可换算），要么其中一个是无量纲的 CSSNumberValue。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
-
CSS.px(100).add(CSS.percent(20))→ 报错：TypeError: Cannot add incompatible types -
CSS.px(100).add('20px')→ 报错：参数必须是CSSNumericValue实例，不能是字符串 -
CSS.px(100).add(CSS.em(1))→ 虽不报错但结果不可预测（em 是相对单位，运行时才解析）
正确用法示例：
const base = CSS.px(100);
const offset = CSS.px(20);
const total = base.add(offset); // ✅ 返回 CSSUnitValue { value: 120, unit: 'px' }
const opacityBase = CSS.number(0.5);
const delta = CSS.number(0.1);
const newOpacity = opacityBase.add(delta); // ✅ 返回 CSSNumberValue { value: 0.6 }
computedStyleMap.get() 返回只读值，不能直接 add()
很多人想读取当前宽度再加 10px，比如：
const styleMap = el.computedStyleMap();
const currentWidth = styleMap.get('width'); // 返回 CSSUnitValue 或 undefined
currentWidth.add(CSS.px(10)); // ❌ TypeError: add is not a function —— 因为 computedStyleMap 返回的是只读对象，且某些浏览器返回的可能是 CSSUnparsedValue
真正可行的路径是：
- 先用
computedStyleMap.get('width')拿到当前值（注意检查是否为CSSUnitValue） - 提取
.value和.unit，构造新值：CSS.px(currentWidth.value + 10) - 再用
attributeStyleMap.set('width', ...)写回（仅影响内联样式）
注意：computedStyleMap 不支持简写属性（如 margin），必须用 marginTop、marginLeft 等长名。
单位缩写和构造函数名必须严格匹配
CSSNumericValue.add() 的输入依赖于正确的构造函数。写错单位名不会报语法错误，但会静默失败或抛出类型错误。
这些是合法的：
-
CSS.px(16)、CSS.em(1.2)、CSS.rem(1) -
CSS.deg(45)（不是CSS.degree(45)） -
CSS.ms(300)（毫秒），CSS.s(0.3)（秒）——两者等价但类型不同，不能跨类型add() -
CSS.number(0.8)（用于 opacity、zIndex 等无量纲值）
这些会出问题：
-
CSS.pixel(16)→ 不存在，返回undefined -
CSS.pixels(16)→ 同上 -
CSS.vw(100)→ 存在，但它是视口单位，add()结果无法静态求值，慎用
最后提醒一句：Firefox 目前（2026 年 4 月）仍不支持 attributeStyleMap，Safari 需手动开启「开发 → 试验性功能 → CSS Typed OM」；Chrome/Edge 105+ 默认启用，但若在 chrome://flags 里禁用了 #enable-css-typed-om，也会失效。别让环境问题掩盖了你的逻辑。
