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

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

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

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

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

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

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

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

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

let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

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

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

ボタンをクリックしたときに、要素の幅と高さを出力してください。

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

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

ボタンをクリックしたときに、要素の幅と高さを 2倍に増やしてください。