JavaScript で HTML フォーム要素のスタイルを設定する

1. JavaScript で HTML 要素にスタイルを追加する
2. JavaScript でクラス名を使用して要素にスタイルを適用する
3. JavaScript でタグにスタイルを適用する

実行時にカスタムスタイルを HTML 要素に設定するユースケースの 1つは、フォームで検証を実行するときです。要素を赤で強調表示し、Username field cannot be left empty などの検証テキストを表示する必要があります。JavaScript を使用して、実行時にスタイルパラメータを HTML 要素に設定するさまざまな方法があります。新しいスタイルを追加したり、既存のスタイルを変更したりすることもできます。以下は、JavaScript を使用して CSS スタイルを HTML 要素に設定するいくつかの方法です。

JavaScript で HTML 要素にスタイルを追加する

JavaScript の .style 属性を使用して要素のスタイルを変更できます。その前に、HTML 要素をクエリして、.style 属性を設定する必要があります。JavaScript で HTML 要素をクエリするには、次のようなさまざまな方法がありますが、最も一般的に使用されるのは document.getElementById() メソッドです。

• getElementById()：JavaScript のドキュメントインターフェイスの ID に基づいて HTML 要素をクエリするために使用されます。通常、開発者は Web ページを設計するときに、HTML 要素に一意の ID を割り当てます。getElementById() は、getElementById() 関数のパラメーターで指定された ID を持つ要素を返します。同じ ID の要素がさらにある場合は、指定された ID の最初の要素が返されます。
• getElementsByClassName()：HTML 要素をクエリする別の方法は、割り当てられたクラス名を使用することです。これらは、要素の装飾に通常使用される CSS クラス名です。複数の HTML 要素が同じ CSS クラス名を持つことができるため、関数は HTML 要素の配列を返します。getElementsByClassName() 関数によって返される要素またはすべての要素に特定のスタイルを変更または追加することを選択できます。
• getElementsByName()：CSS クラス名で HTML 要素を選択する方法と同様に、getElementsByName() 関数は name 属性を使用して、予期される HTML 要素をフィルタリングします。この場合、同じ名前の HTML 要素が複数存在する可能性があります。したがって、パラメータで渡されたものと同じ name 属性を持つ HTML 要素の配列を返します。
• getElementsByTagName()：<div>、<p>、<li> タグなどの特定の HTML タグを選択する必要がある場合に使用されます。スタイルやセットを適用するのに便利です。一度にすべての <div> 要素にスタイルを追加します。getElementsByTagName() 関数は、パラメータで関数に渡されたタグ名を持つ要素の配列を返します。1 回のショットでスタイルを変更する必要がある HTML タグが複数存在する場合があります。
• querySelector()：要素を取得するマスターメソッドのようなものです。この JavaScript 関数で受け入れられるパラメーターの使用法を理解するには、CSS で HTML 要素を照会するためのセレクターの使用を検討してください。document.querySelector("div span")（div 内のすべてのスパンを選択する）、document.querySelector("#elementID")（ID に基づいて要素をクエリする）などのタグ名の組み合わせを使用できます）、document.querySelector(".sample-css")（CSS クラス名 sample-css を持つ要素をクエリするため）など。関数にパラメーターとして渡された条件を満たす最初の要素を返します。
• querySelectorAll：リターンタイプを除くすべての点で querySelector() に似ています。querySelector() 関数のように条件を満たす最初の要素だけを返す代わりに、querySelectorAll() 関数は、パラメーターに記載されている条件を満たすすべての HTML 要素をメソッドに返します。HTML 要素を選択したら、.style 属性を使用し、その後に変更または追加するスタイル名を使用します。たとえば、次のコードでは、ID が username である要素の背景色を変更しようとしています。

<div id="username">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementById('username').style.backgroundColor = 'green';
}

選択した HTML 要素に style 属性（背景色など）が既に設定されている場合は、次のコードで変更します。また、スタイル属性がない場合は、実行時に JavaScript コードによって新しいスタイルが追加されます。

JavaScript でクラス名を使用して要素にスタイルを適用する

JavaScript 関数 getElementsByClassName() でクラス名を使用して要素をクエリできます。要素を選択したら、.style 属性を使用して要素のスタイルを追加または変更できます。このメソッドは、要素の特定の CSS クラスに追加の CSS 属性が必要な場合に適用されます。次のコードは、使用法を示しています。

<div id="username" class="blue-bg">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementsByClassName('blue-bg')[0].style.backgroundColor = 'green';
}

JavaScript でタグにスタイルを適用する

すべての div またはすべての span にスタイルを追加する必要がある場合は、.getElementsByTagName() 関数を使用できます。タグ名を DOM に照会します。パラメータとして渡されたタグ名を満たす HTML 要素のコレクションを返します。関数が HTML 要素を返したら、そのインデックスを使用してその要素に style 属性を適用できます。次のコードはそれを詳しく説明しています。

<div id="output">Hello World!!</div>
<form name="LoginForm">
    <div id="username" class="blue-bg">
        <label>User Name: </label>
        <input type="text" id="username" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.getElementsByTagName('div')[0].style.backgroundColor = 'green';
}

上記のコードを実行すると、最初の div（<div id="output">Hello World!!</div>）の背景色が緑に設定されます。最初の div をターゲットにしているため、インデックスを 0（document.getElementsByTagName("div")[0]）として使用することに注意してください。同様に、document.getElementsByTagName("body")[0].style.backgroundColor = "green"を使用して、body タグにスタイル属性を割り当てることもできます。HTML ドキュメントで許可される body タグは 1つだけなので、body 要素を直接クエリし、document インターフェイスの .body 属性を使用してスタイル属性を適用できます。したがって、コードは document.body.style.backgroundColor = "green"のようになります。