使用新的 CSS 类型化对象模型

Eric Bidelman 介绍了 CSS 类型化对象模型。它看起来将使通过 JavaScript 获取和设置样式值变得更容易，并且不易出错。在适当的时候，少用字符串，多用数字。

例如，如果我们想知道某个元素的填充，传统上我们会执行以下操作

var el = document.querySelector("#thing");
var style = window.getComputedStyle(el);
console.log(style.padding);

我们会得到一个字符串“20px”或类似的值。

这些新的 API 之一允许我们像这样提取它

console.log(
  el.computedStyleMap().get('padding').value,
  el.computedStyleMap().get('padding').unit
);

我们得到一个实际数字 20 和一个字符串“px”。

还存在 attributeStyleMap，它具有 getter 和 setter，以及每个值的函数（例如 CSS.px() CSS.vw()）。

Eric 总结了这些优势

1. 更少的错误。
2. 算术运算和单位转换。
3. 值钳位和舍入。
4. 更好的性能。
5. 错误处理。
6. 命名与 CSS 完全一致。

直接链接 →