JavaScript | class名の追加、削除、切り替え、置き換え、書き換えをする方法
JavaScriptでHTML要素にclass名の追加、削除、切り替え、書き換え、上書きをするサンプルコードです。
classList.add()でclass名を追加する
classList.add()でclass名を追加するサンプルコードです。
classList.add()は指定したclass名を指定したHTML要素に追加します。
<div id="target_id" class="classA"></div>document.querySelector('#target_id').classList.add('classB');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB"></div>カンマ区切りによる複数のclass名の追加が可能です。
<div id="target_id" class="classA"></div>document.querySelector('#target_id').classList.add('classB','classC');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB classC"></div>既に存在するclass名を指定した場合、重複されて追加される事はありません。
<div id="target_id" class="classA"></div>document.querySelector('#target_id').classList.add('classA','classB');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB"></div>classList.remove()でclass名を削除する
classList.remove()でclassを削除するサンプルコードです。
classList.remove()は指定したclass名をHTML要素から削除します。
<div id="target_id" class="classA classB"></div>document.querySelector('#target_id').classList.remove('classA');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classB"></div>classList.remove()で空の値を指定した場合、全てのclassを削除する訳ではなく、何も実行されずclass名はそのまま残ります。
<div id="target_id" class="classA classB"></div>document.querySelector('#target_id').classList.remove();
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB"></div>classList.toggle()でclass名を切り替える
classList.toggle()は、HTML要素に指定したclass名が付与されていたら削除し、付与されていなかったら追加します。
いわゆるトグル（切り替え）を実行します。
<div id="target_id" class="classA classB"></div>document.querySelector('#target_id').classList.toggle('classA');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classB"></div>classList.toggle()は複数のclass名を同時に指定して切り替える事はできません。
例えば以下のサンプルの場合、エラーにはなりませんが「classA」も「classB」もそのまま残っています。
<div id="target_id" class="classA classB"></div>document.querySelector('#target_id').classList.toggle('classA', 'classB');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB"></div>classList.toggle()でclassを切り替える（条件付き）
classList.toggle()は第二引数に条件を記述してclass名を追加するかどうかを指定可能な関数です。
この場合、条件を満たしていれば追加、満たしていなければ削除という処理を行います。
満たしていれば切り替える、という処理ではないことに注意が必要です。
<div id="target_id" class="classA classB"></div>let i = 5;
document.querySelector('#target_id').classList.toggle('classC', i <= 10);
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB classC"></div>classList.replace()でclass名を置き換える
classList.replace()は、指定したclass名を別のclass名に置き換える事が可能な関数です。
この関数は、引数がひとつの場合、また置き換え前と置き換え後のどちらかに空の値を指定した場合は、いずれもパラメータエラーとなりますので注意が必要です。
置き換え前のclass名に存在しない値を指定する事は可能ですが、必ず2つの引数を指定する必要があります。
<div id="target_id" class="classA classB"></div>document.querySelector('#target_id').classList.replace('classA', 'classC');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classC classB"></div>置き換え前に存在しないclass名を指定した場合は、置換え後に指定したclass名を追加という処理をします。
<div id="target_id" class="classA classB"></div>document.querySelector('#target_id').classList.replace('classC', 'classD');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classA classB classD"></div>setAttribute()でclass名を書き換える
setAttribute()でclassを書き換えるサンプルコードです。
setAttribute()は要素の属性を追加する事が可能な関数ですが、既に値が存在している属性の場合は上書きされます。
第一引数は属性名、第二引数に値を指定します。
この関数にてclassを指定した場合、HTML要素に既にひとつ、あるいは複数のclass名が指定されていても常に上書き処理となり書き換えられます。
<div id="target_id" class="classA"></div>サンプルコードでは「classA」は消え、「classB」に上書きされている事が確認できます。
document.querySelector('#target').setAttribute('class', 'classB');
console.log(document.querySelector('#target'));
//<div id="target_id" class="classB">a</div>