JavaScriptでwindow.getComputedStyleを使い、要素のCSSプロパティをすべて取得する方法

window.getComputedStyleでCSSを取得する方法

window.getComputedStyle(要素)メソッドを使うと指定した要素の計算された全てのCSSプロパティを取得することができます。
let style = window.getComputedStyle(element)
「計算されたcssの値」を取得できるので、例えば高さや右マージンをCSSで指定していなくても、
style.height で要素の高さ
style.marginRight で要素の右マージン
が取得できます。
CSSでパーセント(%)指定していてもピクセル(px)単位で取得できます。

疑似要素の場合は
window.getComputedStyle(要素, "::before");
のように第２引数に"::before"や"::after"等を指定します。

window.getComputedStyleの基本的な使い方

JavaScriptで要素のCSSプロパティを取得したい場合、 window.getComputedStyle(要素) を使えば簡単に計算された値を取得できます。
本記事では基本の使い方から疑似要素の取得方法まで詳しく解説します。

CSSの計算済み値を取得するためには、以下のコードを使用します。

let style = window.getComputedStyle(element)

このコードを実行すると、`element` の計算されたすべてのCSSプロパティを取得できます。

変数 styleに「計算されたcssの値」が取得されているので、例えばCSSで明示的に指定していなくても以下のように取得できます。

高さ: style.height → 要素の高さを取得
右マージン: style.marginRight → 要素の右側の余白を取得
右ボーダー: style.borderRight → 右ボーダーの色・太さなどの値を取得
文字色: style.color → テキストの色を取得

なお、CSSで パーセント(%) 指定をしていても、ピクセル(px)単位 で取得されます。
これは、window.getComputedStyle() がブラウザのレンダリング時点での最終計算結果を取得するためです。
そのため、レスポンシブデザインにも対応しやすくなります。

要素のCSSプロパティ取得例

ここは id="myid" のdiv要素
　　border:2px #999 solid;
　　padding:8px;
　　margin:3%;
が指定されている

window.getComputedStyle() で取得した CSS の値は "15.8594px" のようにピクセル(px)表記の文字列として返されます。
そのため、数値として計算する場合は parseFloat() を使って数値型に変換する必要があります。

let h = parseFloat(style.height);

ソースコード

<div id="myid" style="border:2px #999 solid;padding:8px;margin:3%;">
  ここは id="myid" のdiv要素<br>
  　　border:2px #999 solid;<br>
  　　padding:8px;<br>
  　　margin:3%;<br>
  が指定されている
</div>
<button onclick="getStyle()">要素のCSSプロパティを取得する</button>
<div id="answer"></div>

<script>
function getStyle(){
  let element = document.getElementById("myid");

  //計算されたすべてのcssプロパティを取得する
  let style=window.getComputedStyle(element);
  document.getElementById("answer").innerHTML = `
    高さ(height): ${style.height}<br>
    右マージン(marginRight): ${style.marginRight}<br>
    右ボーダー(borderRight): ${style.borderRight}<br>
    文字の色(color): ${style.color}<br>
    ボーダーの太さ(borderWidth): ${style.borderWidth}<br>
  `;
}

疑似要素のCSSプロパティ取得例

疑似要素のスタイルを取得するには、window.getComputedStyle(要素, "::before") のように第2引数に擬似要素名を指定します。
これにより、`::before` や `::after` などのHTMLには存在しないCSSのスタイルを取得できます。

ここは id="myidPseudo" のdiv要素

ソースコード

<div id="myidPseudo" style="">
  ここは id="myidPseudo" のdiv要素<br>
</div>
<button onclick="getPseudoStyle()">疑似要素のCSSプロパティを取得する</button>
<div id="answerPseudo"></div>
<style>
  #myidPseudo{
    position:relative;
    border:1px #999 solid;
    padding:4px 4px 4px 10em;
    margin:0;
    height:40px;
  }
  #myidPseudo::before{
    content:"::beforeの疑似要素";
    position:absolute;
    left:0;
    height:80%;
    background:#ff8;
  }
</style>
<script>
function getPseudoStyle(){
  let element = document.getElementById("myidPseudo");
  //計算されたすべてのcssプロパティを取得する
  let style=window.getComputedStyle(element, "::before");
  document.getElementById("answerPseudo").innerHTML = `
    コンテンツ(content): ${style.content}<br>
    文字色(color): ${style.color}<br>
    背景色(backgroundColor): ${style.backgroundColor}<br>
  `;
}
</script>