CSS の プロパティの計算値は、継承の過程で親から子へ伝えられる値です。これは指定値から計算されます。
プロパティの計算値に達するのに必要な計算は、一般に (em
の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に font-size: 16px
と padding-top: 2em
が指定された場合、 padding-top
の計算値は 32px
(フォントサイズの倍) になります。
しかしながら、いくつかのプロパティ (width
, margin-right
, text-indent
, top
など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント指定された値はパーセント計算された値に変わります。さらに、 line-height
に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、使用値が定義された場合、絶対値になります。
注: DOM の getComputedStyle()
API は解決値を返しますが、これはプロパティによって計算値であるか使用値であるかが変わります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Level 2 (Revision 2) computed-value の定義 |
草案 |
変更なし |
CSS Level 2 (Revision 1) computed value の定義 |
勧告 | 初回定義 |
関連情報
window.getComputedStyle
- CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素