The CSS numeric factory functions, such as CSS.em()
and CSS.turn()
are methods that return CSSUnitValues with the value being the numeric argument and the unit being the name of the method used. These functions create new numeric values less verbosely than using the CSSUnitValue()
constructor.
CSS.number(number)
CSS.percent(number)
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)
CSS.deg(number)
CSS.grad(number)
CSS.rad(number)
CSS.turn(number)
CSS.s(number)
CSS.ms(number)
CSS.Hz(number)
CSS.kHz(number)
CSS.dpi(number)
CSS.dpcm(number)
CSS.dppx(number)
CSS.fr(number)
We use the CSS.vmax()
numeric factory function to create a CSSUnitValue
:
const height = CSS.vmax(50);
console.log(height);
console.log(height.value);
console.log(height.unit);
In this example, we set the margin on our element using the CSS.px()
factory function:
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit);