JavaScript 要素のスタイルを変更する方法と注意点
JavaScriptで、対象の要素のスタイルを変更する方法を紹介します。
divやinput type="text"などのhtmlの要素は、すべての同じ方法でスタイルを変更できます。
要素の取得
以下のように、取得したい要素にidを付与します。
htmlの要素にアクセスする手段はいろいろありますが、idを使ってアクセスするのが一番シンプルですので、ここでidを指定します。
<div id="div1">
<input type="text" id="txt1">
</div>idを使って、対象のテキストボックスを取得します。
document.getElementById('取得したい要素のid')で、要素を取得できます。
const div1 = document.getElementById('div1');
const txt1 = document.getElementById('txt1');スタイルの変更
対象の要素.style.変更したいスタイル名の形でスタイルにアクセスできます。
以下の例では、div1の要素のwidth（幅）とheight（高さ）を設定しています。
const div1 = document.getElementById('div1');
div1.style.width = '300px';
div1.style.height = '200px';注意点
例えばbackground-colorのように、-の付いたスタイルを変更したい場合、以下のようにしても、マイナスの式と判断されてしまい、正しく設定できません。
const div1 = document.getElementById('div1');
div1.style.background-color = 'red'; // NGbackground-colorはbackgroundColorのように、キャメルケース(camelCase)にする必要があります。
const div1 = document.getElementById('div1');
div1.style.background-color = 'red'; // NG
div1.style.backgroundColor = 'red'; // OK