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

JavaScriptでCSSプロパティを変更するには、対象の要素を選択し、そのstyleオブジェクトのプロパティを設定します。関連するスタイルをまとめて適用する場合は、CSSクラスを追加します。1つの要素にはIDまたはCSSセレクターを使い、一致するすべての要素を更新する場合はクラスベースのコレクションを使います。ブラウザーではdocumentオブジェクトを利用でき、jQueryは必須ではありません。

element.styleでCSSプロパティを1つ変更する

インラインスタイルを1つ設定する場合はelement.styleを使います。ハイフンを含むCSSプロパティ名は、JavaScriptではキャメルケースになります。たとえば、border-colorはborderColorです。この小さなフィクスチャは、JavaScript環境で要素の選択と値の設定のパターンを実行できるようにしています。Webページ上では、documentはブラウザーの実際のドキュメントを指します。

次の例を実行します。

このセクションのコードと表示されるラベルや出力は英語のままです。

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

スタイルを設定すると、その要素のインラインスタイルが変更されます。スタイルシートのルールが編集されるわけではなく、ほかのスタイルが削除されることもありません。ブラウザーで同じ要素を選択するにはdocument.getElementById("email")を使います。プロパティを読み取ったり変更したりする前に、戻り値を確認してください。

CSSクラスで複数のスタイルを適用する

ある状態に複数の関連するスタイルが必要な場合は、クラスを使うと管理しやすくなります。スタイルシートでクラスを定義し、classList.add()で適用して、classList.remove()で解除します。たとえば、入力エラー用のクラスで、赤い境界線と赤い文字色の両方を設定できます。classListを使えば、要素に付いているほかのクラスは維持されます。

element.className = "input-error"を代入してもクラス属性を変更できますが、クラス文字列全体が置き換わります。レイアウト用や検証用などの既存クラスは、新しい文字列に含めない限り失われます。クラスを個別に追加・削除するときはclassListを使い、すべてのクラスを意図的に置き換えるときはclassNameを使います。

getElementsByClassNameでクラスから要素を選択する

document.getElementsByClassName("input-blue-border")は、一致する要素のライブなHTMLCollectionを返します。配列ではありません。一致する要素がドキュメントに追加されたり、ドキュメントから外されたりすると、コレクションの内容も更新されます。現在一致しているすべての要素を変更するには、for...ofループでコレクションを反復し、各要素のスタイルまたはクラスリストを更新します。配列のメソッドが必要な場合は、先にArray.from(...)で配列へ変換してください。

このメソッドは要素に対しても呼び出せるため、その要素の子孫にある一致要素を探せます。引数には先頭のドットを付けずにクラス名を指定します。.input-blue-borderのようにドットを付けた形式は、querySelector()などのCSSセレクターAPIで使います。

getElementByIdまたはquerySelectorで1つの要素を選択する

document.getElementById("email")はIDで要素を検索し、一致する要素、またはnullを返します。ドキュメント内のIDは一意である必要があります。IDの重複は不正なマークアップなので、重複時にどの要素が返るかを当てにしないでください。

document.querySelector(".input-blue-border")はCSSセレクターを受け取り、最初に一致した要素を返します。一致する要素がない場合はnullを返します。ID（#email）、クラス（.input-blue-border）、タグ（input）で選択できます。複数の要素に一致しうるセレクターを指定しても、querySelector()が返すのは最初の1つだけです。スタイルやクラスを変更する前に、戻り値がnullでないことを確認してください。

セレクターを選び、対象なしや複数一致に対処する

対象と更新する要素の数に応じてセレクターを選びます。一意なIDを持つ1つの要素にはgetElementByIdを使います。CSSセレクターのほうが便利で、最初の一致だけが必要な場合はquerySelector()を使います。同じクラスを持つすべての要素を変更する場合はgetElementsByClassNameを使います。スタイル宣言を1つ変更するならelement.styleを設定し、複数の宣言から成る名前付きの状態を切り替えるならクラスを切り替えます。

対象の要素がまだドキュメント内にない場合、IDやクラス名に誤字がある場合、またはマークアップの読み込みが終わっていない場合は、選択に失敗することがあります。対象のマークアップが存在してから選択するか、styleやclassListにアクセスする前に戻り値を確認してください。ブラウザーでは、たとえばconst element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");のように書けます。クラスコレクションから1つだけ更新する場合は対象を明示的に選び、すべて更新する場合はコレクションを反復します。

まとめ

まず変更対象の要素を選択します。インラインスタイルを1つ設定するにはelement.styleを使い、既存クラスを維持しながら複数のスタイルを適用するにはclassListを使います。getElementByIdはIDで要素を探し、querySelector()はCSSセレクターに最初に一致する要素を返します。getElementsByClassNameはライブコレクションを返すため、同じクラスに一致するすべての要素を更新できます。単一要素の戻り値は利用前に確認し、複数の要素が対象なら反復処理を行います。