CSS numeric factory functions
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
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);
Examples
We use the CSS.vmax()
numeric factory function to create a
CSSUnitValue
:
let height = CSS.vmax(50);
console.log( height ); // CSSUnitValue {value: 50, unit: "vmax"}
console.log( height.value ) // 50
console.log( height.unit ) // vmax
In this example, we set the margin on our element using the CSS.px()
factory function:
myElement.attributeStyleMap.set('margin', CSS.px(40));
let currentMargin = myElement.attributeStyleMap.get('margin');
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
Specifications
Specification |
---|
CSS Object Model (CSSOM) # namespacedef-css |
Browser compatibility
BCD tables only load in the browser