【JavaScript】HTML要素にclass属性を追加する方法

JavaScriptでHTML要素にclass属性を追加する

JavaScriptでHTML要素にclass属性を追加するためには、classListプロパティのadd()メソッドを使います。

< HTML >

<p id="target">HTML要素にclass属性を追加する</p>

< JavaScript >

// ターゲット要素を取得する
const target = document.querySelector('#target');

// class属性を追加する
target.classList.add('add_class');

JavaScriptでclass属性を追加した後のHTML要素は以下になります。

< class属性追加後のHTML >

<p id="target" class="add_class">HTML要素にclass属性を追加する</p>

複数のclass属性を一括で追加する方法

JavaScriptでHTML要素に複数のclass属性を一括で追加するためには、classListプロパティを直接編集します。

< HTML >

<p id="target" class="original_class">HTML要素にclass属性を追加する</p>

< JavaScript >

// ターゲット要素を取得する
const target = document.querySelector('#target');
// ターゲット要素の元々のclass属性を保存しておく
const original_class_list = target.classList;

// 保存しておいた元々のclass属性と、追加したいclass属性を文字列結合してclass属性へ設定する
// ※結合する際には半角スペースを開ける
target.classList = original_class_list + ' add_class_1 add_class_2';

JavaScriptでclass属性を追加した後のHTML要素は以下になります。

< class属性追加後のHTML >

<p id="target" class="original_class add_class_1 add_class_2">HTML要素にclass属性を追加する</p>

まとめ

JavaScriptを使ってHTML要素に一つのclass属性を追加するには、classListプロパティのadd()メソッドを使います。

複数のclass属性を一度に追加したい場合には、classList属性を直接編集しましょう。

【JavaScript】HTML要素からclass属性を削除する方法

JavaScriptを使って、HTML要素からclass属性を削除する方法をご紹介します。また、全てのclass属性を一度に削除する方法も併せてご紹介しています。

maaengineerhouse.com