JavaScriptにおけるスタイル読み取りの問題

styleプロパティを通して、 読み取ることができるのは、 style属性を通して設定された スタイルのみです。これは、 CSSファイルで設定されたスタイルは 読み取ることができないことを意味します。

例を見てみましょう。 以下のような要素があるとします：

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

CSSファイルで以下のスタイルが 設定されているとします：

css#elem {
  color: red;
}

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

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

スタイルの値を読み取ってみましょう：

javascriptconsole.log(elem.style.color); // '' を出力する