要素の算出されたスタイルを取得

要素の算出されたスタイルを取得するには、window.getComputedStyleメソッドを使用します。

  • ※ Internet Explorer 8以下には対応していません。

構文

第一引数 element 取得したい要素
第二引数 pseudoElt 一致させたい疑似要素(必要なければ空を指定)
戻り値 style CSSStyleDeclarationオブジェクトを返す

サンプルコード

JavaScript

なお、戻り値であるCSSStyleDeclarationオブジェクトは、marginやborder、paddingなどショートハンドで取得できないプロパティがあります。

Internet Explorer 8以下に対応させる

Internet Explorer 8以下(6以上)に対応させるには、element.currentStyleプロパティを使用します。
ただし、このプロパティは指定値を取得するので、autoなどのキーワードで指定されていた場合(初期値を含む)、戻り値はそのキーワードで返します。

  • ※ オブジェクトからプロパティを参照する場合は、キャメルケースで指定する必要があります。

構文

要素 element 一致させたい疑似要素(必要なければ空を指定)
戻り値 style オブジェクトを返す

関数定義

window.getComputedStyleとelement.currentStyleを1つにまとめた関数を定義して使用する方法です。

JavaScript

使い方

引数

引数名 説明
第一引数
必須
element Element 要素
第二引数 styleName string 取得したいスタイルのプロパティ名
第三引数 pseudoElt string getComputedStyleメソッドの第二引数と同じ一致させたい疑似要素

戻り値

第二引数の指定があった場合は指定したプロパティの値、指定しなかった場合はgetComputedStyleメソッドの戻り値またはcurrentStyleプロパティの戻り値を返します。

サンプルコード

JavaScript

JavaScript逆引きリファレンス一覧へ戻る