CSS numerische Fabrikfunktionen
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die CSS numerischen Fabrikfunktionen, wie CSS.em()
und CSS.turn()
, sind Methoden, die CSSUnitValues zurückgeben, wobei der Wert das numerische Argument ist und die Einheit der Name der verwendeten Methode. Diese Funktionen erstellen neue numerische Werte weniger umständlich als der Gebrauch 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)
Beispiele
Wir verwenden die CSS.vmax()
numerische Fabrikfunktion, 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()
Fabrikfunktion:
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
Spezifikationen
Specification |
---|
CSS Object Model (CSSOM) # namespacedef-css |
Browser-Kompatibilität
BCD tables only load in the browser