CSS 数值工厂函数
Baseline 广泛可用 *
CSS 数值工厂函数，例如 CSS.em() 和 CSS.turn()，是返回 CSSUnitValue 的方法，其中值是数值参数，单位是所使用方法的名称。这些函数比使用 CSSUnitValue() 构造函数更简洁地创建新的数值。
语法
js
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 单位值的数字。
返回值
一个具有指定数值和单位的 CSSUnitValue 对象。
示例
我们使用 CSS.vmax() 数值工厂函数来创建一个 CSSUnitValue。
js
const height = CSS.vmax(50);
console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
在此示例中，我们使用 CSS.px() 工厂函数来设置元素的边距。
js
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
规范
| 规范 |
|---|
| CSS 类型化 OM Level 1 # numeric-factory |
浏览器兼容性
加载中…