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 サポート サポート サポート サポート