CSS numeric factory functions
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS numeric factory Funktionen, wie CSS.em() und CSS.turn(), sind Methoden, die CSSUnitValues zurückgeben, wobei der Wert das numerische Argument und die Einheit der Name der verwendeten Methode ist. Diese Funktionen erstellen neue numerische Werte weniger umständlich als die Verwendung des CSSUnitValue()-Konstruktors.
Syntax
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)
Parameter
number-
Eine Zahl, die im CSS-Einheitswert verwendet werden soll.
Rückgabewert
Ein CSSUnitValue-Objekt mit dem angegebenen numerischen Wert und der Einheit.
Beispiele
Wir verwenden die CSS.vmax() numeric factory Funktion, um einen CSSUnitValue zu erstellen:
const height = CSS.vmax(50);
console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
In diesem Beispiel setzen wir den Rand unseres Elements mit der CSS.px()-factory Funktion:
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # numeric-factory |