.getComputedStyle()

https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

有効なスタイルシートを適用し、それらの値が含む基本的な値の算出が行われた後の、要素の全てのCSSプロパティの値を取得するメソッドです。

文法
例
説明
注意事項
ブラウザ互換性
仕様
関連項目

文法

var style = window.getComputedStyle(element[, pseudoElt]);

引数	説明
element	算出されているスタイルの値を取得したいElement(要素)を指定します。
pseudoElt (任意)	擬似要素に相当する文字列を指定します。通常の要素に対しては省略しなければいけません。(またはnull)
戻り値
style	CSSStyleDeclarationオブジェクトが返されます。

例

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// これは下記と同義です:
// var style = document.defaultView.getComputedStyle(elem1, null);

下記は、getComputedStyleを実際に実行している例になります。

<!DOCTYPE html>
<html>
<head>
<style>
#elem-container{
  position: absolute; border: 1px dotted #000;
  left: 100px; top: 50px; height: 100px;
}
</style>
</head>
<body>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
  function getTheStyle(){
    //要素を取得
    var elem = document.getElementById("elem-container");

    //getComputedStyleを介して要素のheightを取得
    var theCSSprop = window.getComputedStyle(elem,null)
                        .getPropertyValue("height");

    //上記で取得した値を出力
    document.getElementById("output").innerHTML = theCSSprop;
  }

  //実行
  getTheStyle();
</script>
</body>
</html>

説明

返されるオブジェクトは、要素のstyleプロパティが返すオブジェクトと同じ型ですが、これら2つのオブジェクトは目的が異なります。 getComputedStyleが返すオブジェクトは読み取り専用で、要素のスタイルを調べるのに使用することが出来ます。 (<style>要素、または外部スタイルシートによる設定が含まれます) element.styleのオブジェクトは、指定した要素のスタイルを設定するのに使用されるべきです。

1つ目の引数は要素にしなければいけません。 (#text Nodeのような非要素ノードを渡すと、エラーがスローされます。) Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)からは、返されるURL値は、url("http://foo.com/bar.jpg")のようにURLの周りをクォートで囲みます。

defaultView

オンライン上の多くのサンプルコードでは、 getComputedStyleはdocument.defaultViewオブジェクトから使用されています。全ての似たようなケースでこれは無用であり、 getComputedStyleとして同様にwindowオブジェクト上に存在します。 defaultViewを使用するパターンはwindowに仕様を書きたくない何かしらの要因があり、またJavaでも使用できるAPIを作成するためだったと思われます。(翻訳に自信なし)

擬似要素の使用

getComputedStyleは擬似要素からスタイルを取得することが可能です。 (例えば、::after、::before、 ::marker、::line-markerです。 W3C仕様)

<!DOCTYPE html>
<html>
<head>
<style>
 h3:after {
   content: ' rocks!';
 }
</style>
</head>
<body>
<h3>&lt;h3&gt;要素</h3>
<input id="btn" type="button" value="擬似要素のcontentを取得" />
<script>
  document.getElementById("btn").onclick = function(){
      var h3 = document.querySelector('h3'),
          result = getComputedStyle(h3, ':after').content;
      alert(result);
  }
</script>
</body>
</html>

注意事項

getComputedStyleによって返される値は、解決された(resolved value)値として知られているものです。これらは通常CSS2.1の算出された値(computed value)と同じですが、 width、height、paddingのような一部の古いプロパティは、使用される値(used value)の代わりになります。元々CSS 2.0では算出された値は、カスケードと継承の後に"使用する準備が出来た"、最終的なプロパティの値として定義されていましたが、 CSS 2.1では算出された値は算出された値をpre-layoutとして、使用される値をpost-layoutとして再定義されました。 CSS 2.0のプロパティであればgetComputedStyle関数は、古い意味での"算出された値"、現在は"使用される値"と呼ばれているものを返します。 pre-layoutとpost-layoutの値の違いの例として、要素のwidthまたはheightを表す"％"(パーセンテージ)が挙げられます。使用される値(post-layout)のケースのみ、ピクセルに相当する値に置換されます。

ある特定のケースでは、意図的に精密では無い値を返しています。特に"CSS History Leak security issue"(CSS履歴漏洩セキュリティ問題)と呼ばれている問題を避けるために、ブラウザはリンクに使用されている値について、わざと"嘘"をつく可能性があり、常にユーザーがリンク先のサイトを訪れたことが無いかのようにして値を返します。この実装例の詳細については、 http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/と、 http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/を参照してください。その他のほとんどのブラウザでも、getComputedStyleによって、擬似セレクタのスタイルに同様の変更が適用されて値が返されます。

CSSが変わっている最中(transition)では、 getComputedStyleはFirefoxでは元のプロパティ値を返しますが、 WebKitでは最終的な値を返します。

Firefoxでは、autoが指定されている値のプロパティは、 "auto"では無く、使用されている値を返します。そのため、もしheight:30pxのプロパティを持ち、 height:100px;のブロック内に含まれる要素に対して、 top:auto;とbottom:0;を適用して、 topの算出されたスタイルの要求を行った場合、 Firefoxは100px-30px=70pxとして、top:70pxを返します。

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	9	◯	◯
擬似要素のサポート	◯	◯	11	×	◯

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	WP7 Mango	◯	◯
擬似要素のサポート	?		?	×	?	?