CSS 数値ファクトリー関数
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSS 数値ファクトリー関数、たとえば CSS.em()
や CSS.turn()
は、値を数値引数、単位を使用するメソッド名として CSSUnitValues (en-US) を返すもので、このメソッドを使用すると、数値引数で単位を設定することができます。これらの関数は CSSUnitValue()
(en-US) コンストラクターを使うよりも冗長でなく新しい数値を生成します。
構文
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
(en-US) を作成します。
let 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));
let currentMargin = myElement.attributeStyleMap.get('margin');
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
仕様書
Specification |
---|
CSS Object Model (CSSOM) # namespacedef-css |
ブラウザーの互換性
BCD tables only load in the browser