CSSファイルからJavaScriptでプロパティを読み取る

CSSファイルで設定されたプロパティは、 特別な関数getComputedStylesを使って 読み取ることができます。

どのように行うか見てみましょう。 次のような要素があるとします：

html<div id="elem">
  text
</div>

この要素には、以下のスタイルが 設定されているとします：

css#elem {
  width: 100px;
  color: red;
  font-size: 20px;
}

変数に要素への参照を取得します：

javascriptlet elem = document.querySelector('#elem');

次に、取得した要素への参照を 関数getComputedStylesのパラメータとして 渡します：

javascript let computedStyle = getComputedStyle(elem);

結果として、私たちの要素に対する CSSプロパティの値が含まれたオブジェクトを 取得します。 これを使って、例えば色を 読み取ってみましょう：

javascriptconsole.log(computedStyle.color); // 'red'を出力

次に、幅を読み取ります：

javascriptconsole.log(computedStyle.width); // '100px'を出力

次に、フォントサイズを読み取ります：

javascriptconsole.log(computedStyle.fontSize); // '20px'を出力

css#elem {
  width: 200px;
  height: 200px;
}

css#elem {
  width: 200px;
  height: 200px;
}