CSS数字工厂函数 - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS numeric factory functions，例如 CSS.em() 和 CSS.turn()，是一组使用传入的数字参数以及所指定的单位（单位名称即所用方法名称）来返回 CSSUnitValues 的方法。这些函数创建新的数字值，与使用 CSSUnitValue.CSSUnitValue() 构造函数相比，没有后者那么冗长。

语法

CSS.number(number);
CSS.percent(number);

// <length>
CSS.em(number);
CSS.ex(number);
CSS.ch(number);
CSS.ic(number);
CSS.rem(number);
CSS.lh(number);
CSS.rlh(number);
CSS.vw(number);
CSS.vh(number);
CSS.vi(number);
CSS.vb(number);
CSS.vmin(number);
CSS.vmax(number);
CSS.cm(number);
CSS.mm(number);
CSS.Q(number);
CSS.in(number);
CSS.pt(number);
CSS.pc(number);
CSS.px(number);

// <angle>
CSS.deg(number);
CSS.grad(number);
CSS.rad(number);
CSS.turn(number);

// <time>
CSS.s(number);
CSS.ms(number);

// <frequency>
CSS.Hz(number);
CSS.kHz(number);

// <resolution>
CSS.dpi(number);
CSS.dpcm(number);
CSS.dppx(number);

// <flex>
CSS.fr(number);

示例

我们使用 CSS.vmax() 数字工厂函数来创建一个 CSSUnitValue：

let height = CSS.vmax(50);

console.log( height );       // CSSUnitValue {value: 50, unit: "vmax"}
console.log( height.value )  // 50
console.log( height.unit )   // vmax

在这个例子中，我们给元素设定 margin 属性值，使用 CSS.px() 函数:

myElement.attributeStyleMap.set('margin', CSS.px(40));
let currentMargin = myElement.attributeStyleMap.get('margin');
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'

规范

Specification	Status	Comment
CSS Object Model (CSSOM) Numeric Factory Functions	Working Draft	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

另请参阅

• CSSUnitValue.CSSUnitValue()