Spec-Zone.ru › Web APIs

Функции создания числовых значений 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

См. также

  • CSSUnitValue()

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API