JavaScriptでクラスを変更する

JavaScriptで要素のクラスを変更する方法

JavaScriptでは、HTML要素のクラス属性を変更することができます。これにより、要素のスタイルや動作を動的に変更することができます。

方法

主に以下の方法があります。

classNameプロパティを使用する

最も直接的な方法です。要素のclassNameプロパティに新しいクラス名を設定します。

// 要素を取得する
const element = document.getElementById('myElement');

// クラスを変更する
element.className = 'newClass';

より柔軟な方法でクラスを操作できます。

• クラスをトグルする
  classList.toggle('toggleClass')
• クラスの有無をチェックする
  classList.contains('myClass')

const element = document.getElementById('myElement');

// クラスを追加
element.classList.add('active');

// クラスを削除
element.classList.remove('inactive');

例

<div id="myElement" class="oldClass"></div>

const element = document.getElementById('myElement');

// classNameプロパティを使用
element.className = 'newClass';

// classListプロパティを使用
element.classList.add('active');
element.classList.remove('oldClass');

DOMと関係

DOM (Document Object Model) は、HTMLドキュメントをJavaScriptから操作するためのインターフェースです。要素を取得したり、プロパティやメソッドを操作する際にはDOMを利用します。上記の例では、document.getElementById()を使用して要素を取得しています。

備考

• 複数のクラスを同時に追加・削除する場合には、classListプロパティが便利です。
• classListプロパティは既存のクラスを保持したまま操作できます。
• classNameプロパティはクラス名を完全に置き換えます。

注意

• クラス名は有効なCSSセレクタとして使用できる必要があります。
• クラス名は空白で区切られます。

コード例の説明

コード例 1: classNameプロパティを使用

const element = document.getElementById('myElement');
element.className = 'newClass';

• element.className = 'newClass': 取得した要素の className プロパティを "newClass" に設定します。これにより、要素の全てのクラスが "newClass" に置き換わります。
• document.getElementById('myElement'): IDが "myElement" の要素を取得します。

const element = document.getElementById('myElement');
element.classList.add('active');
element.classList.remove('inactive');

• element.classList.remove('inactive'): 取得した要素のクラスリストから "inactive" クラスを削除します。
• element.classList.add('active'): 取得した要素のクラスリストに "active" クラスを追加します。既存のクラスは保持されます。

要素のHTML構造

<div id="myElement" class="oldClass"></div>

• <div id="myElement" class="oldClass">: IDが "myElement" で、クラスが "oldClass" の div 要素を作成します。

コードの動作

最初のコード例では、要素の全てのクラスが "newClass" に置き換わるため、最終的なクラスは "newClass" になります。

2番目のコード例では、要素のクラスが "oldClass active" から "active" に変更されます。 "inactive" クラスは削除され、"active" クラスは追加されます。

• document.getElementById() は指定した ID の要素を取得します。
• classList プロパティはクラスを追加、削除、またはトグルすることができます。

スタイル属性を直接操作する

• 直接スタイルを変更する場合は可能ですが、一般的には推奨されません。CSSを使用する方がメンテナンス性や可読性が向上します。

const element = document.getElementById('myElement');
element.style.backgroundColor = 'red'; // 背景色を変更

CSSのカスタムプロパティを利用する

• 動的にCSSの値を変更したい場合に便利です。

/* CSS */
#myElement {
  --my-color: blue;
  background-color: var(--my-color);
}

const element = document.getElementById('myElement');
element.style.setProperty('--my-color', 'red'); // カスタムプロパティを変更

フレームワークやライブラリを活用する

• React, Vue, Angularなどのフレームワークや、jQueryなどのライブラリでは、クラスの変更を簡略化するための機能を提供しています。

注意事項

• フレームワークやライブラリを使用する場合は、そのドキュメントを参照してください。
• カスタムプロパティはブラウザのサポート状況に注意が必要です。
• スタイル属性を直接操作すると、CSSのオーバーライドやスタイルの衝突が発生する可能性があります。

要素のクラスを変更する方法は複数ありますが、classListプロパティが最も一般的かつ柔軟な方法です。他の方法は特定の状況やプロジェクトの要件に応じて選択してください。