Window getComputedStyle() メソッド

定義と使用方法

getComputedStyle() メソッドはHTML要素の計算CSS属性と値を取得します。

getComputedStyle() メソッドはCSSStyleDeclarationオブジェクトを返します。

計算スタイル

計算スタイルとは、すべてのスタイルの源が適用された後に要素に使用されるスタイルを指します。

スタイルの源：外部および内部のスタイルシート、継承されたスタイル、およびブラウザのデフォルトスタイル。

参照もしくは関連する項目：

CSSStyleDeclaration オブジェクト

例

例1

要素の計算背景色を取得する：

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

実際に試してみてください

例2

要素からすべての計算スタイルを取得する：

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x);
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

実際に試してみてください

例3

要素の中の最初の文字の計算フォントサイズ（フラッシュ要素を使用して）を取得する：

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter");
let size = cssObj.getPropertyValue("font-size");

実際に試してみてください

文法

window.getComputedStyle(element, pseudoElement)

パラメータ

パラメータ 説明
element 必須。その計算スタイルを取得するための要素。
pseudoElement オプション。取得したいフラッシュ要素。

返り値

タイプ 説明
オブジェクト 要素のすべてのCSS属性と値を持つCSSStyleDeclarationオブジェクト。

getComputedStyle() メソッドとstyle属性の違い

getComputedStyle() メソッドと HTMLElementのstyle属性を比較してみましょう：後者は要素のインラインスタイルのみアクセス可能で、指定したどんなユニットでも使用できますが、要素のスタイルシートのスタイルに適用された情報は一切伝えられません。

ブラウザのサポート

すべてのブラウザがサポートしています getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート