JavaScript

構文

classの追加・削除・置き換え

更新日：2024-07-22

  • ＞ classの追加・削除　【classList.add、classList.remove】

  • 【動作サンプル】

  • ＞ classの追加・削除　【classList.toggle】

  • 【動作サンプル】

  • ＞ classの置き換え　【classList.replace】

  • 【動作サンプル】

◆classの追加・削除　【classList.add、classList.remove】

classList.addプロパティを使うことでclassの追加が、classList.removeプロパティを使うことでclassの削除ができます。

ElementTarget.classList.add( '追加したいclass名' );

ElementTarget.classList.remove( '削除したいclass名' );

下の例では、「class追加」ボタンを押すとp要素に「test」classが追加されcssが適用されます。
反対に「class削除」ボタンを押すとp要素に付与された「test」classが削除され適用されたcssが解除されます。

分かりやすくするため、ターゲットとなるp要素にはidを付けてあります。

コード例 - Sample

HTML 

<div class="example">
 <p id="a1">テキスト</p> <!--←ここにclassを追加・削除-->
 <input type="button" id="a1-add-bt" value="class追加">
 <input type="button" id="a1-remove-bt" value="class削除">
</div>

CSS 

/*追加されるclass用にcssを用意*/
.example>.test{
 color: #fff;
 background-color: #4f5b93;
}

JavaScript 

<script>
//class追加
document.getElementById('a1-add-bt').addEventListener('click', function(){
 document.getElementById('a1').classList.add('test');
});

//class削除
document.getElementById('a1-remove-bt').addEventListener('click', function(){
 document.getElementById('a1').classList.remove('test');
});
</script>

動作サンプル【sample】

動作例 - Sample

テキスト

また、複数のclassを同時に追加することも可能です。

ElementTarget.classList.add( '追加したいclass名1', '追加したいclass名2' … );

ElementTarget.classList.remove( '削除したいclass名1', '削除したいclass名2' … );

コード例 - Sample

HTML 

<div class="example">
 <p id="a2">テキスト</p> <!--←ここにclassを追加・削除-->
 <input type="button" id="a2-add-bt" value="class追加">
 <input type="button" id="a2-remove-bt" value="class削除">
 <input type="button" id="a2-remove-bt2" value="「test2」classだけ削除">
</div>

CSS 

/*追加されるclass用にcssを用意*/
.example>.test{
 color: #fff;
 background-color: #4f5b93;
}
.example>.test2{
 font-weight: bold;
}
.example>.test2::first-letter{
 font-size: 1.2rem;
 color: #cdcd09;
}

JavaScript 

<script>
//class追加
document.getElementById('a2-add-bt').addEventListener('click', function(){
 document.getElementById('a2').classList.add('test', 'test2');
});

//class削除
document.getElementById('a2-remove-bt').addEventListener('click', function(){
 document.getElementById('a2').classList.remove('test', 'test2');
});

//「test2」classだけ削除
document.getElementById('a2-remove-bt2').addEventListener('click', function(){
 document.getElementById('a2').classList.remove('test2');
});
</script>

動作サンプル【sample】

動作例 - Sample

テキスト

◆classの追加・削除　【classList.toggle】

classList.addプロパティclassList.removeプロパティでは、追加と削除でそれぞれ処理を別ける必要がありましたがclassList.toggleを使えば1つの処理で追加・削除を行えます。

ElementTarget.classList.toggle( '変更したいclass名' );

classが存在しなければclassを追加、classが存在していればclassを削除が1つの処理で行えます。
また、複数のclassを同時に追加することも可能です。

HTML 

<div class="example">
 <p id="a3">テキスト</p> <!--←ここにclassを追加・削除-->
 <input type="button" id="a3-change-bt" value="class追加・削除">
</div>

CSS 

/*追加されるclass用にcssを用意*/
.example>.test{
 color: #fff;
 background-color: #4f5b93;
}

JavaScript 

<script>
//class変更
document.getElementById('a3-change-bt').addEventListener('click', function(){
 document.getElementById('a3').classList.toggle('test');
});
</script>

動作サンプル【sample】

動作例 - Sample

テキスト

◆classの置き換え　【classList.replace】

classList.replaceプロパティを使うことでclassの置き換えができます。

ElementTarget.classList.replace( '置き換え前のclass名', '置き換え後のclass名' );

指定したclassが存在しなければ、何も起こりません。

HTML

▶あらかじめ「test」classを付けておきます 

<div class="example">
 <p id="a4" class="test">テキスト</p> <!--←ここにclassを追加・削除-->
 <input type="button" id="a4-change-bt" value="「test2」classへ置き換え">
 <input type="button" id="a4-change-bt2" value="「test」classへ置き換え">
</div>

CSS 

/*追加されるclass用にcssを用意*/
.example>.test{
 color: #fff;
 background-color: #4f5b93;
}
.example>.test2{
 font-weight: bold;
}
.example>.test2::first-letter{
 font-size: 1.2rem;
 color: #cdcd09;
}

JavaScript 

<script>
//「test」→「test2」class置き換え
document.getElementById('a4-change-bt').addEventListener('click', function(){
 document.getElementById('a4').classList.replace('test', 'test2');
});

//「test2」→「test」class置き換え
document.getElementById('a4-change-bt2').addEventListener('click', function(){
 document.getElementById('a4').classList.replace('test2', 'test');
});
</script>

動作サンプル【sample】

動作例 - Sample

テキスト