HTML要素のクラスを追加、削除する

HTML要素のclass属性を編集する

HTML要素はCSSを適用するなどの理由で、class属性でクラス名を指定することがよくあると思います。
クラス名は1つだけのこともあれば、共通のCSSを適用するために複数になることもあります。

クラス名の編集では(1)すでに設定されているものを残したまま新しいクラス名を追加や削除することや、(2)一括で置き換えたいこともあります。
これらのケースを2つに分けて、それぞれのclass属性の編集方法を解説していきます。

また、今回は解説用に以下のHTMLコードを使ってHTML要素のclass属性を編集していきます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1" class="text">テキストテキストテキスト</p>
</article>

すでに設定されたクラス名を残したまま新しいクラス名を追加する

HTML要素にすでに設定されているクラス名は残した状態で、新しくクラス名を追記するときはclassListプロパティのaddメソッドを使います。

以下の例では、HTMLコードからp要素を取得して、2つのクラス名を追加します。

JS コード例

// p要素を取得
let p1_element = document.getElementById("p1");

// クラス名を追加
p1_element.classList.add("text_type1");
p1_element.classList.add("text_mgb10");

このコードを実行すると、HTMLは以下のようにクラス名「text_type1」と「text_mgb10」が追記されます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1" class="text text_type1 text_mgb10">テキストテキストテキスト</p>
</article>

addメソッドはクラス名を1つずつ追加することができます。
一括で複数登録することはできないため、2つ以上追加したいときは追加するクラス名の数だけ実行してください。

指定したクラス名だけ削除する

設定されたクラス名から、指定したクラス名だけをピンポイントで削除するときはclassListプロパティのremoveメソッドを使います。

removeメソッドはaddメソッドの対になるメソッドで、クラス名を1つずつ削除します。
このメソッドも複数のクラス名を削除したいときは、削除する数だけ実行する必要があります。

以下の例では、p要素に設定された3つのクラス名「text text_type1 text_mgb10」から、「text_type1」だけを削除します。

JS コード例

// p要素を取得
let p1_element = document.getElementById("p1");

// クラス名を削除
p1_element.classList.remove("text_type1");

このコードを実行すると、p要素のクラス名は1つだけ削除されます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1" class="text text_mgb10">テキストテキストテキスト</p>
</article>

class属性の値を全てではなく、クラス名を個別に削除したいときに便利なメソッドです。

クラス名を一括で編集する

class属性にあるクラス名を一括で編集したいときはclassNameプロパティを使います。
classNameプロパティはclassListプロパティのようなメソッドはなく、クラス名を編集するときは変数に値を入れる形で行います。

以下の例は、すでに設定されたクラス名に追加する形で2つの新しいクラス名を設定します。

JS コード例

// p要素を取得
let p1_element = document.getElementById("p1");

// クラス名を追加
p1_element.className = p1_element.className + 'text_type1 text_mgb10';

このコードを実行すると、p要素のclass属性は以下のようになります。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1" class="text text_type1 text_mgb10">テキストテキストテキスト</p>
</article>

p要素に元々設定されていたクラス名を残して追記を行うために、「p1_element.className + 'text_type1 text_mgb10'」と文字列連結した値をp1_element.classNameに代入してクラス名を設定しています。

もし元々のクラス名を残す必要がない場合は、「p1_element.className = 'text_type1 text_mgb10';」のように新しいクラス名だけ代入します。

もう１つの方法として、属性を編集するsetAttributeメソッドからクラス名を編集することもできます。
以下の例は既存の設定されたクラス名は残さずに、新しいクラス名を2つ設定します。

JS コード例

// p要素を取得
let p1_element = document.getElementById("p1");

// クラス名を設定
p1_element.setAttribute("class","text_type1 text_mgb10");

こちらのコードを実行すると、p要素のclass属性は以下のようになります。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1" class="text_type1 text_mgb10">テキストテキストテキスト</p>
</article>