CSS numeric factory functions

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:

const 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));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'

Specifications

Specification
CSS Object Model (CSSOM) # namespacedef-css

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
CSS
Hz() static method
Q() static method
cap() static method
ch() static method
cm() static method
cbq() static method
cqh() static method
cqi() static method
cqmax() static method
cqmin() static method
cqw() static method
deg() static method
dpqm() static method
dpi() static method
dppx() static method
dvb() static method
dvh() static method
dvi() static method
dvmax() static method
dvmin() static method
dvw() static method
em() static method
escape() static method
ex() static method
fr() static method
grad() static method
highlights static property
ic() static method
in() static method
kHz() static method
lh() static method
lvb() static method
lvh() static method
lvi() static method
lvmax() static method
lvmin() static method
lvw() static method
mm() static method
ms() static method
number() static method
paintWorklet static property
Experimental
pc() static method
percent() static method
pt() static method
px() static method
rad() static method
rcap() static method
rch() static method
registerProperty() static method
rem() static method
rex() static method
ric() static method
rlh() static method
s() static method
supports() static method
svb() static method
svh() static method
svi() static method
svmax() static method
svmin() static method
svw() static method
turn() static method
vb() static method
vh() static method
vi() static method
vmax() static method
vmin() static method
vw() static method

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android
`CSS`
`Hz()` static method
`Q()` static method
`cap()` static method
`ch()` static method
`cm()` static method
`cbq()` static method
`cqh()` static method
`cqi()` static method
`cqmax()` static method
`cqmin()` static method
`cqw()` static method
`deg()` static method
`dpqm()` static method
`dpi()` static method
`dppx()` static method
`dvb()` static method
`dvh()` static method
`dvi()` static method
`dvmax()` static method
`dvmin()` static method
`dvw()` static method
`em()` static method
`escape()` static method
`ex()` static method
`fr()` static method
`grad()` static method
`highlights` static property
`ic()` static method
`in()` static method
`kHz()` static method
`lh()` static method
`lvb()` static method
`lvh()` static method
`lvi()` static method
`lvmax()` static method
`lvmin()` static method
`lvw()` static method
`mm()` static method
`ms()` static method
`number()` static method
`paintWorklet` static property Experimental
`pc()` static method
`percent()` static method
`pt()` static method
`px()` static method
`rad()` static method
`rcap()` static method
`rch()` static method
`registerProperty()` static method
`rem()` static method
`rex()` static method
`ric()` static method
`rlh()` static method
`s()` static method
`supports()` static method
`svb()` static method
`svh()` static method
`svi()` static method
`svmax()` static method
`svmin()` static method
`svw()` static method
`turn()` static method
`vb()` static method
`vh()` static method
`vi()` static method
`vmax()` static method
`vmin()` static method
`vw()` static method

Syntax

Examples

Specifications

Browser compatibility

See also