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

2021年6月1日 2021年6月2日

こんにちは！CODE CLUB965のKです！

今回は、HTMLで要素にclass属性を追加したり、削除する方法を紹介したいと思います。

クラス名を編集する

クラス名の編集については、以下の2パターンを紹介したいと思います。

・既に設定されているクラスを残し、新しいクラスを追加する
・指定したクラスを削除する
・一括でクラスを置き換える

今回は以下のHTMLコードに対して、クラス名を追加したり削除したりする方法を書いていきます。

<article>
	<h1>タイトル</h1>
	<p id="sample" class="txt">テキスト本文</p>
</article>

一つずつみていきましょう！

既に設定されているクラスを残し、新しくクラスを追加するときは、classListプロパティのaddメソッドを使います。

// 対象の要素を取得
var element = document.getElementById("sample");

// クラス名を追加
element.classList.add("txt2");
element.classList.add("txt3");

上記のように書くことで、以下のように既にあるクラス名にプラスで新しいクラス名を追加できます。

<article>
	<h1>タイトル</h1>
	<p id="sample" class="txt txt2 txt3">テキスト本文</p>
</article>

addメソッドはクラス名をひとつずつ追加できます。
2つ以上まとめて追加したい場合は、追加するクラス名の数だけ実行する必要があるので覚えておきた下さい。

指定したクラス名だけをピンポイントで削除したい場合は、classListプロパティのremoveメソッドを使います。
上記の例を使ってコード例を書きます。

// 対象の要素を取得
var element = document.getElementById("sample");

// クラス名を削除
element.classList.remove("txt2");

このコードを実行すると、指定したクラス名は削除されます。

<article>
	<h1>タイトル</h1>
	<p id="sample" class="txt txt3">テキスト本文</p>
</article>

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

class属性にあるクラス名を一括で編集したいときは、classNameプロパティを使います。

// 要素を取得
var element = document.getElementById("sample");

// クラス名を追加
element.className = element.className + 'txt2 txt3';

これを実行すると、

<article>
	<h1>タイトル</h1>
	<p id="sample" class="txt txt2 txt3">テキスト本文</p>
</article>

既に設定しているクラス名を残しつつ、新しいクラス名をまとめて追加できます。

ちなみに、元々のクラス名を残す必要がない場合は、

element.className = 'txt2 txt3';

と記述すれば良いです。

また、別の方法として、属性を編集する「setAttributeメソッド」を使ってクラス名を編集することもできます。

// 要素を取得
var element = document.getElementById("sample");

// クラス名を設定
element.setAttribute("class","txt txt2");

これを実行すると、

<article>
	<h1>タイトル</h1>
	<p id="sample" class="txt txt2">テキスト本文</p>
</article>

このように一括で置き換えることができます。

今回は、HTML要素にclass属性を追加、削除する方法について紹介しました！

HTML要素は、CSSを適用するなどの理由で、class属性でクラス名を指定することがよくあります。
なので、場合によってはclassを追加したり、削除する場面もあると思いますので、今回の方法を試してもらえればと思います！

それでは、また！

Follow me!