はじめに

前回、「JavaScriptでClassを取得したい時の設定あれこれ」で、JavaScriptでClassを取得する方法を紹介しました。

今回は、その取得したClassに新たにClassを追加したり、あるいは削除する方法を紹介します。

目次

Classを追加するメソッド「classList.add」

例えば、「背景が青色のボタン」があったとして、その背景を赤色に変えたいとします。

この時、「背景が青色のボタン」と「赤色の背景色」の2つのCSSを設定し、「赤色の背景色」Classが上書きされれば「背景が赤色のボタン」ができます。

JavaScriptでClassの追加はclassList.add()メソッドを使用します。

（今回の例ではボタンクリックでClassが追加・削除されるように設定しています）

HTML

HTMLではリンクボタンを作成しました。

<a class="button">Button</a>

CSS

CSSでは「背景が青色のボタン」と「背景が赤色」の2つのClassを作成しました。

.button {
	width: 180px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: blue;
	color: #fff;
	cursor: pointer;
}
.bg_red {
	background: red;
}

JavaScript

buttonClassを定数btn_blue11と宣言し、この定数がclassList.add()によってbg_redClassが追加されるように設定しています。

（Classの追加はクリック（addEventListener('click')）で発生させています）

const btn_blue11 = document.getElementsByClassName('button');
	for( i=0; i<btn_blue11.length; i++) {
		btn_blue11[i].addEventListener('click',function() {
		this.classList.add('bg_red');
	});
}

できあがったもの

「背景が青色」のボタンが作成され、クリックで背景が赤色に変化（Classが追加）します。

この場合、「元のClassに新しいClassを追加する」という処理になるため、繰り返しクリックしても追加されたClassが削除される事はありません（赤くなりっぱなし）。

Classを削除するメソッド「classList.remove」

次にClassを削除する「classList.remove」メソッドを紹介します。

これは先ほどとは逆に、元々持っているClassを削除するメソッドとなります。

CSSは上記と同じため割愛します。

HTML

今度は最初からbuttonとbg_redClassを持ったボタンを作成しました。

<a class="button bg_red">Button</a>

JavaScript

classList.addの時と記述はほぼ同じですが、classList.remove()メソッドを使用することで、クリック時にbg_redClassが削除されるように設定しています。

const btn_blue21 = document.getElementsByClassName('button');
	for( i=0; i<btn_blue21.length; i++) {
		btn_blue21[i].addEventListener('click',function() {
		this.classList.remove('bg_red');
	});
}

できあがったもの

「背景が赤色」のボタンが作成され、クリックで背景が青色に変化（Classが削除）します。

この場合も、「元のClassに新しいClassを削除する」という処理になるため、繰り返しクリックしても削除されたClassが追加される事はありません（青くなりっぱなし）。

Classの追加・削除を切り替えるメソッド「classList.toggle」

上の2つの例では、追加あるいは削除されたClassが元に戻る事はありませんでした。

Classの追加と削除を繰り返し行いたい場合はclassList.toggle()を使用します。

<a class="button">Button</a>

CSS

JavaScript

classList.toggle()によってbg_redClassが追加・削除を繰り返されるように設定しています。

const btn_blue31 = document.getElementsByClassName('button');
	for( i=0; i<btn_blue31.length; i++) {
		btn_blue31[i].addEventListener('click',function() {
		this.classList.toggle('bg_red');
	});
}

できあがったもの

「背景が青色」のボタンが作成され、クリックで背景が赤色に変化（Classが追加）します。

さらにこの状態でもう一度クリックすると青色に変化（追加されたClassが削除）し、この処理が繰り返されます。

Classを置換するメソッド「classList.replace」

最後にもう1つ、classList.replace()メソッドを紹介します。

これは、「元のClass」を「新しいClass」に置換するメソッドになります。

記述方法としてはclassList.replace('元のClass','新しいClass');となります。

JavaScript

classList.replaceによってbuttonClassがbg_redClassに置換されるように設定しています。

const btn_blue41 = document.getElementsByClassName('button');
	for( i=0; i<btn_blue41.length; i++) {
		btn_blue41[i].addEventListener('click',function() {
		this.classList.replace('button','bg_red');
	});
}

できあがったもの

「背景が青色のボタン」ができましたが、これをクリックすると「背景が赤色」のClassに置換されるため、ボタンではなく背景が赤いテキストに切り替わります。

こちらは繰り返し処理されないので、新しいClassに切り替わったら後は、再度クリックしても切り替わったままになります。