【javascript】styleプロパティを使って要素のスタイルを変える方法

javascriptで要素のスタイルを指定したりするにはstyleプロパティを使います。

styleプロパティを使うことでスタイルの指定やスタイルの取得をすることができます。

styleプロパティ

elem.style.backgroundColor = "カラー指定";

上記では要素に背景色を指定します。

注意点としてはスタイルプロパティ名はcss本来のハイフン記載ではなくキャメルケースの書き方になります。

たとえばbackground-colorであればbackgroundColorになります。

実際の書き方

html

<ul>
	<li id="item01">項目テキスト1</li>
	<li id="item02">項目テキスト2</li>
	<li id="item03">項目テキスト3</li>
	<li id="item04">項目テキスト4</li>
</ul>

javascript

let elem = document.getElementById('item02');
elem.style.backgroundColor = '#eee';

上記の指定だと指定した要素（idはitem02）の背景色を#eeeに指定しています。

サンプル