[JavaScript]要素のスタイル情報を取得する (window.getComputedStyle)

styleオブジェクトのプロパティ

インラインまたは動的に設定されるすべてのスタイルには、要素のstyleオブジェクトのプロパティからアクセスできます。

var position = elem.style.position

注意点としては、backgcounr-color のように、ハイフンが名前に含まれるプロパティについては、キャメルケースを使う必要があることです。('-' が減算演算子と解釈されてしまうため。)

var bgcolor = elem.style.backgroundColor;

また、上記の方法で取得できるのは、インラインで設定されたか、JavaScriptを使って動的に設定されたスタイル値だけなので、スタイルシートを使って設定されたスタイルにはアクセスできません。

スタイルの設定方法に関係なく、スタイルにアクセスする方法

スタイルシートを使って設定されたスタイルにアクセスするには、window.getComputedStyle()メソッドを使います。
このメソッドが返すのは、CSSStyleDeclaration オブジェクトで、オブジェクトのプロパティには、getPropertyValue()メソッドにプロパティ名を渡してアクセスします。このメソッドに渡すプロパティ名は、cssのプロパティと同じで、キャメルケースに変換する必要はありません。

※ getComputedStyle()メソッド古いIE（IE8よりも前）には実装されていないので、クロスブラウザ対応が必要になります。

var style = window.getComputedStyle(elem, null);
var bgcolor = style.getPropertyValue("background-color");

なお、getComputedStyle()メソッドは、document.defaultView からも呼び出せます。

var style = document.defaultView.getComputedStyle()

IE8では、要素のcurrentSytyle プロパティにアクセスしてスタイル値を取得します。

var style = elem.currentStyle

currentStyle オブジェクトのプロパティには、キャメルケースでアクセスします。

var bgcolor =  style["backgroundColor"];

サンプル(要素elemにスタイルシートで適用されているbackground-colorの値を取得する)

var style;
var bgcolor;
if (elem.currentStyle) { //クロスブラウザ対応
    style = elem.currentStyle;
    bgcolor =  style["backgroundColor"];

} else if (window.getComputedStyle) {
    style = window.getComputedStyle(elem, null)
    bgcolor = style.getPropertyValue('background-color');
}

取得されるスタイル値の優先順位

スタイルがインラインとスタイルシートを通じて設定されている場合は、インラインのスタイルが優先されます。
動的に設定されるスタイルは、インラインとスタイルシートで設定された値に関係なく、動的に設定されたスタイルが優先されます。

スタイルの設定

window.getComputedStyle()で取得できるオブジェクトは読み込み専用のため、JavaScriptでスタイルを動的に設定する場合は、要素のstyleオブジェクトのプロパティに直接セットします。（しつこいけどスタイル名はキャメルケース！！）

elem.style.backgroundColor = "#CCC";

まとめ

• 要素のstyleプロパティからは、インラインまたは動的に設定されたスタイルのみアクセスできる。
• 名前にハイフンが含まれるスタイルのプロパティ名は、キャメルケースに置き換えてアクセスする。
• 設定方法に関係なく要素のスタイルを取得するには、window.getComputedStyle()メソッドを使う。(IE8以前はelement.currentStyle)
• getComputedStyle() で取得したオブジェクトのプロパティには、getPropertyValue()メソッドを使ってアクセスする。

参照URL
window.getComputedStyle - MDN https://developer.mozilla.org/en/DOM/window.getComputedStyle
CSSStyleDeclaration - MDN https://developer.mozilla.org/en/DOM/CSSStyleDeclaration

参考文献
Javascript クックブック p252

JavaScriptクックブック