JavaScript を使用して CSS プロパティを変更する

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript を使用して CSS プロパティを変更する
Nithin Krishnan 2023年10月12日
JavaScript JavaScript CSS
  1. JavaScript で getElementsByClassName を使用して CSS プロパティを変更する
  2. JavaScript で getElementById を使用して CSS プロパティを変更する
  3. JavaScript の querySelector() で CSS プロパティを変更する
  4. まとめ
JavaScript を使用して CSS プロパティを変更する

ハイパーテキストマークアップ言語（HTML）は静的であり、通常は馬鹿げています。これは、動的条件に基づいてコードを実行する機能がないことを意味します。条件が満たされた場合に特定の HTML 要素またはタグを表示-非表示にする if 条件ブロックの規定はありません。このようなシナリオでは、HTML 要素の CSS スタイルを変更するために JavaScript または jQuery に依存する必要がある場合があります。

<div> などの HTML 要素のスタイルを変更するには、<div> またはその特定の HTML 要素を一意に選択する必要があります。これで、ドキュメントインターフェイスの次の機能を使用してこれを行うことができます。

JavaScript で getElementsByClassName を使用して CSS プロパティを変更する

getElementsByClassName は、HTML ドキュメント全体を検索し、この関数のパラメータで渡されたクラス名を持つすべての HTML 要素の配列を返します。これを要素で使用して、指定された CSS クラス名を持つサブ要素を検索することもできます。getElementByClassName の構文は次のとおりです。

document.getElementsByClassName('green-class'));

element.style を使用してスタイルを設定する

要素を一意に識別したら、.style または .className メソッドを使用して CSS スタイルを変更できます。次の例を参照してください。

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>

function changeStyle() {
  document.getElementsByClassName('input-blue-border')[0].style.borderColor =
      'red';
}

changeStyle() メソッドでは、document.getElementsByClassName("input-blue-border") メソッドを使用して入力要素をクエリすることに注意してください。選択された要素を含む配列を返します。配列の最初の要素を選択し、その境界線の色を .style.borderColor = "red"で変更します。

element.className を使用してスタイルを設定する

element.className を使用して、HTML 要素のさまざまなスタイルパラメータをクラスとしてクラブ化し、element.className を使用して選択した要素にクラス名を割り当てることで、HTML 要素のさまざまなスタイルパラメータを変更できます。この方法は、特に入力フィールドにエラーを表示する必要があるシナリオで役立ちます。その場合、入力フィールドの境界線の色を赤色に変更し、入力の内部テキストを赤色に変更する必要があります。したがって、これらのスタイルをクラスとしてクラブ化し、element.className 属性を使用して要素に割り当てることができます。次のコードは、エラー処理を示しています。

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>

function changeClass() {
  document.getElementsByClassName('input-blue-border')[0].className =
      'input-error';
}

input-error クラスには、入力フィールドの境界線の色とフォントの色を赤に設定するいくつかの属性があります。

備考

  • getElementByClassName() メソッドは、引数として渡されたクラス名の値を修飾する要素の配列を返します。
  • getElementByClassName() は、このメソッドによって返される配列を反復処理することにより、複数の要素にスタイル変更を適用するときに使用できます。
  • 要素が選択されると、element.style.<style attribute> は特定のスタイル属性を選択された要素に設定します。
  • 同様に、element.className は、それらのスタイル属性を CSS クラスとしてクラブ化することにより、選択した HTML 要素に複数のスタイル変更を設定するのに役立ちます。

JavaScript で getElementById を使用して CSS プロパティを変更する

HTML 要素に一意の ID が割り当てられている場合は、ドキュメントインターフェイスの getElementById() 関数を使用して、その ID をクエリし、スタイルを変更できます。これは、Web 開発者によって最も広く使用されている方法です。ほとんどの場合、div に割り当てられた ID は一意に保たれるため、getElementById() 関数の実行中に他の HTML 要素が選択されることはありません。getElementById() の構文は次のとおりです。

document.getElementById("parent-1"));

この場合、一意の要素を選択するため、スタイルの変更は簡単です。次のコードはその方法を示しています。これは前述のものと似ていますが、要素のクエリ方法が異なります。ここでは、要素 ID を使用して HTML ノードを一意に識別します。

document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';

備考

  • getElementByClassName() とは異なり、getElementById() メソッドは、クエリによって選択されたノード要素であるオブジェクトを 1つだけ返します。
  • 目的の HTML には、getElementById() メソッドが機能するための id 属性が必要です。
  • 複数の HTML ノードが同じ ID を持っている場合、getElementById() メソッドは指定された ID を持つ最初の要素を返します。
  • getElementByClassName() とは異なり、スタイルの変更は、配列ではなくオブジェクトを返すため、getElementById() 関数によって返されるオブジェクトに直接適用できます。

JavaScript の querySelector() で CSS プロパティを変更する

querySelector() メソッドは、要素選択メカニズムによって提供される機能のスーパーセットです。これは、getElementsByClassName() メソッドと getElementById() メソッドの両方の能力を兼ね備えています。このメソッドを使用すると、CSS クラスの作成時に同じ方法で HTML 要素を選択できます。ID、クラス、さらには HTML タグで要素を選択するために機能します。戻り型に関しては、getElementById() メソッドと同様に動作します。querySelector() は、パラメータに記載されている条件を満たす最初の HTML ノード要素のみを返します。querySelector() に使用される構文は次のとおりです。

document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');

したがって、ここでも、.style.borderColor または .className を追加することで、選択した HTML 要素にスタイルを適用できます。同じ HTML 構造を使用し、onclick メソッドを changeStyle() に変更すると、JavaScript で以下に説明するようにコードを追加することで、新しいスタイルを動的にもたらすことができます。

<button class="ml-3" onclick="changeStyle()">Change Border</button>

function changeStyle() {
  document.querySelector('.input-blue-border').style.borderColor = 'red';
}

同様に、入力の CSS クラスを変更する場合は、スタイルを変更するだけでなく、上記の例の .style.borderColor ではなく .className() 属性を使用する必要があります。

<button class="ml-3" onclick="changeClass()">Change Border</button>

function changeClass() {
  document.querySelector('.input-blue-border').className = 'input-error';
}

備考

  • document.querySelector() 関数の戻りタイプに注目する価値があります。クエリを満たすすべての HTML オブジェクトを返す代わりに、クエリ条件を満たす最初の要素を返します。
  • querySelector() を使用する利点は、HTML 要素の ID に基づいてクエリを実行したり、CSS クラスにしたり、HTML タグ名を使用したりするなど、さまざまな状況で使用できることです。
  • クエリ用語を渡す HTML 要素の配列ではなくオブジェクトを返すため、querySelector() ではクエリ条件を満たす複数の div のスタイルを動的に変更できない場合があります。

まとめ

実行時に HTML 要素のスタイルを変更するために、選択した HTML 要素の .style または .className 属性を利用できます。ターゲット HTML ノードを選択する際に直面する課題。HTML ノードを一意に選択するにはさまざまな方法があります。getElementsByClassName() メソッドを使用できます。このメソッドは、CSS クラスの名前を使用して HTML ノードを照会します。または、要素に ID を割り当てて、.getElementById() でクエリを実行するか、渡されたパラメータに基づいてクエリを理解するすべての状況に適合する多目的 querySelector() メソッドを使用して、要素を一意に選択します。