要素の算出されたCSSプロパティの値を取得
window.getComputedStyleメソッドによって要素の算出されたCSSプロパティの値を取得するには、ブラケット構文（[プロパティ名]）またはドット構文（.プロパティ名）で直接プロパティ名を指定するか、getPropertyValueメソッドを使用します。
- ※ IE8以下には対応していません。
構文
ブラケット構文
var result = CSSStyleDeclaration[propertyName];ドット構文
var result = CSSStyleDeclaration.propertyName;getPropertyValueメソッド
var result = CSSStyleDeclaration.getPropertyValue(propertyName);| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
propertyName | string | 取得したい値のプロパティ名 |
戻り値
第一引数で指定したプロパティの値を返します。
単位がある値は算出されピクセルに変換された値を単位（px）付きで返します。
サンプルコード
JavaScript
var element = document.getElementById('sample'),
style = window.getComputedStyle(element);
// 直接プロパティ名を指定（ブラケット構文）
console.log(style['margin-top']));
// 直接プロパティ名を指定（ドット構文）
console.log(style.marginTop));
// getPropertyValueメソッドで指定
console.log(style.getPropertyValue('margin-top'));ドット構文で直接プロパティ名を指定する場合は、ハイフンが含まれるプロパティ名はサンプルコードにもあるようにキャメルケースで指定します。
window.getComputedStyleメソッドについては、要素の算出されたスタイルを取得ページをご覧ください。