ウィンドウgetComputedStyle（）
例
要素の計算された背景色を取得します。
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
以下のその他の例。
定義と使用法
このgetComputedStyle()メソッドは、計算されたCSSプロパティとHTML要素の値を取得します。
getComputedStyle()メソッドはを返します
CSSStyleDeclaration object。
計算されたスタイル
計算されたスタイルは、すべてのスタイリングソースが適用された後に要素で使用されるスタイルです。
スタイルソース：外部および内部のスタイルシート、継承されたスタイル、およびブラウザのデフォルトスタイル。
関連項目：
構文
window.getComputedStyle(element, pseudoElement)
パラメーター
| Parameter | Description |
| element | Required. The element to get the computed style for. |
| pseudoElement | Optional. A pseudo-element to get. |
戻り値
| タイプ | 説明 |
| オブジェクト | 要素のすべてのCSSプロパティと値を含むCSSStyleDeclarationオブジェクト。 |
その他の例
要素からすべての計算されたスタイルを取得します。
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>";
}
要素の最初の文字の計算されたフォントサイズを取得します（疑似要素を使用）：
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
ブラウザのサポート
getComputedStyle()すべてのブラウザでサポートされています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |