CSS数字工厂函数

Experimental

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

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

另请参阅