Функции создания числовых значений CSS
Базовая поддержка Широко доступна *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.
* Некоторые части этой функции могут иметь различный уровень поддержки.
Функции создания числовых значений CSS, такие как CSS.em() и CSS.turn(), — это методы, которые возвращают CSSUnitValues со значением, равным числовому аргументу, и единицей измерения, соответствующей имени используемого метода. Эти функции создают новые числовые значения более лаконично, чем использование конструктора CSSUnitValue().
Синтаксис
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)
Примеры
Мы используем функцию создания числовых значений CSS.vmax() для создания CSSUnitValue:
const height = CSS.vmax(50);
console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
В этом примере мы задаём отступ элемента с помощью функции CSS.px():
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
Спецификации
| Спецификация |
|---|
| CSS Объектная модель (CSSOM) # namespacedef-css |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
Hz_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
|---|---|---|---|---|---|---|---|---|---|---|---|
Q_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
factory_functions_static |
28 | 12 | 22 | 15 | 9 | 28 | 22 | 15 | 9 | 1.5 | 4.4 |
cap_static |
118 | 118 | Нет | 104 | 17.2 | 118 | Нет | 79 | 17.2 | 25.0 | 118 |
ch_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
cm_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
cqb_static |
105 | 105 | Нет | 91 | 16.4 | 105 | Нет | 72 | 16.4 | 20.0 | 105 |
cqh_static |
105 | 105 | Нет | 91 | 16.4 | 105 | Нет | 72 | 16.4 | 20.0 | 105 |
cqi_static |
105 | 105 | Нет | 91 | 16.4 | 105 | Нет | 72 | 16.4 | 20.0 | 105 |
cqmax_static |
105 | 105 | Нет | 91 | 16.4 | 105 | Нет | 72 | 16.4 | 20.0 | 105 |
cqmin_static |
105 | 105 | Нет | 91 | 16.4 | 105 | Нет | 72 | 16.4 | 20.0 | 105 |
cqw_static |
105 | 105 | Нет | 91 | 16.4 | 105 | Нет | 72 | 16.4 | 20.0 | 105 |
deg_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
dpcm_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
dpi_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
dppx_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
dvb_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
dvh_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
dvi_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
dvmax_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
dvmin_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
dvw_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
em_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
escape_static |
46 | 79 | 31 | 33 | 10.1 | 46 | 31 | 33 | 10.3 | 5.0 | 46 |
ex_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
fr_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
grad_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
|---|---|---|---|---|---|---|---|---|---|---|---|
highlights_static |
105 | 105 | предварительный просмотр | 91 | 17.2 | 105 | Нет | 72 | 17.2 | 20.0 | 105 |
ic_static |
118 | 118 | Нет | 104 | 16.4 | 118 | Нет | 79 | 16.4 | 25.0 | 118 |
in_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
kHz_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
lh_static |
118 | 118 | Нет | 104 | 16.4 | 118 | Нет | 79 | 16.4 | 25.0 | 118 |
lvb_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
lvh_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
lvi_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
lvmax_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
lvmin_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
lvw_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
mm_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
ms_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
number_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
paintWorklet_static |
65 | 79 | Нет | 52 | Нет | 65 | Нет | 47 | Нет | 9.0 | 65 |
pc_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
percent_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
pt_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
px_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
rad_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
rcap_static |
118 | 118 | Нет | 104 | 17.2 | 118 | Нет | 79 | 17.2 | 25.0 | 118 |
rch_static |
118 | 118 | Нет | 104 | 17.2 | 118 | Нет | 79 | 17.2 | 25.0 | 118 |
registerProperty_static |
78 | 79 | 128 | 65 | 16.4 | 78 | 128 | 56 | 16.4 | 12.0 | 78 |
rem_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
rex_static |
118 | 118 | Нет | 104 | 17.2 | 118 | Нет | 79 | 17.2 | 25.0 | 118 |
ric_static |
118 | 118 | Нет | 104 | 17.2 | 118 | Нет | 79 | 17.2 | 25.0 | 118 |
|---|---|---|---|---|---|---|---|---|---|---|---|
rlh_static |
118 | 118 | Нет | 104 | 16.4 | 118 | Нет | 79 | 16.4 | 25.0 | 118 |
s_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
supports_static |
28 | 12 | 22 | 15 | 9 | 28 | 22 | 15 | 9 | 1.5 | 4.4 |
svb_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
svh_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
svi_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
svmax_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
svmin_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
svw_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
turn_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
vb_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
vh_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
vi_static |
108 | 108 | Нет | 94 | 16.4 | 108 | Нет | 73 | 16.4 | 21.0 | 108 |
vmax_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
vmin_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
vw_static |
66 | 79 | Нет | 53 | 16.4 | 66 | Нет | 47 | 16.4 | 9.0 | 66 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/factory_functions_static