CSS 數值工廠函式

Baseline 廣泛可用 *

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來,該特性已在各大瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

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

瀏覽器相容性

另見