zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript 要素のスタイルを変更する方法と注意点

JavaScriptで、対象の要素のスタイルを変更する方法を紹介します。

divinput 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'; // NG

background-colorbackgroundColorのように、キャメルケース(camelCase)にする必要があります。

const div1 = document.getElementById('div1');
div1.style.background-color = 'red'; // NG
div1.style.backgroundColor = 'red'; // OK


関連記事