Javascriptのwindow.getComputedStyleで要素の全てのcssプロパティ値を取得する

Javascriptのwindow.getComputedStyleで要素の全てのcssプロパティ値を取得する

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

例

高さ等は"15.8594px"のように「文字列」として返してきます。
数字に変更したい場合は parseFloat(文字列)関数を使って変換します。
let h = parseFloat(style.height);

ソースコード

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

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

  //計算されたすべてのcssプロパティを取得する
  let style=window.getComputedStyle(elm);

  answerText += "高さ(height) "+ style.height +"<br>";
  answerText += "右マージン(marginRight) "+ style.marginRight +"<br>";
  answerText += "右ボーダー(borderRight) "+ style.borderRight +"<br>";
  answerText += "文字の色(color) "+ style.color +"<br>";

  document.getElementById("answer").innerHTML=answerText;
}