みなさんこんにちは!
今回の記事は、

・jQueryでclass属性を削除するにはどうしたらいいの?
・jQueryでclass属性を切り替える方法が知りたい!
というお悩みを解決する記事になっています。
・jQueryでclass属性を追加する方法【addClass()メソッドを使います】
・jQueryでclass属性を削除する方法【removeClass()メソッドを使います】
・jQueryでclass属性を切り替える方法【toggleClass()メソッドを使います】
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
jQueryでclassを追加する方法:addClass()
jQueryでclassを追加するには、addClass()メソッドを使用します。
使い方自体は非常にシンプルで、追加したいclassを引数に指定するだけで大丈夫です。
基本的な使い方
$(セレクタ).addClass(class名)
それでは早速、実際の実装例を見ながらその使い方を確認していきましょう。
実装コード
<p id="test-text1">テストテキスト</p>
<button onClick="clickButton1()">クラスを追加</button>
<script>
function clickButton1() {
$("#test-text1").addClass("red-text")
}
</script>
<style>
.red-text {
color: red;
}
</style>
動作確認用
テストテキスト
上記の例では、ボタンをクリックすると、上部のpタグに「red-tect」というclassが追加され、文字の色が赤色に変わるよう実装しています。
addClass()メソッドで複数のclassを追加する方法
addClass()メソッドを使うと、複数のclassを同時に追加することも可能です。
使い方はとても簡単で、追加したいclassを半角スペースで区切るだけで大丈夫です。
複数のclassを追加する方法
$(セレクタ).addClass(class名1 class名2 class名3)
実装コード
<p id="test-text2">テストテキスト</p>
<button onClick="clickButton2()">クラスを追加</button>
<script>
function clickButton2() {
$("#test-text2").addClass("red-text bold-text")
}
</script>
<style>
.red-text {
color: red;
}
.bold-text {
font-weight: bold;
}
</style>
動作確認用
テストテキスト
このように、「red-text」「bold-text」いう二つのclassが追加されたことで、赤色でかつ太字の文字へと変わっていることがご確認いただけたかと思います。
jQueryでclassを削除する方法:removeClass()
jQueryでclassを削除するには、removeClass()メソッドを使います。
その使い方は、addClass()メソッドと同じでとても簡単で、今度は削除したいclassを引数に指定するだけで大丈夫です。
基本的な使い方
$(セレクタ).removeClass(class名)
それでは早速、実際の実装例を見ながらその使い方を確認していきましょう。
実装コード
<p class="red-text" id="test-text3" >テストテキスト</p>
<button onClick="clickButton3()">クラスを削除</button>
<script>
function clickButton3() {
$("#test-text3").removeClass("red-text")
}
</script>
<style>
.red-text {
color: red;
}
</style>
動作確認用
テストテキスト
上記の例では、ボタンをクリックすると、上部のpタグから「red-text」いうclassが削除され、文字の色が「赤→黒」へ変わるよう実装しています。
removeClass()メソッドを使って複数のclassを削除する方法
addClass()メソッド同様、removeClass()メソッドでも複数のclassを同時に削除することができます。
複数のclassを削除する方法
$(セレクタ).removeClass(class名1 class名2 class名3)
実装コード
<p class="red-text bold-text" id="test-text4" >テストテキスト</p>
<button onClick="clickButton4()">クラスを削除</button>
<script>
function clickButton4() {
$("#test-text4").removeClass("red-text bold-text")
}
</script>
<style>
.red-text {
color: red;
}
.bold-text {
font-weight: bold;
}
</style>
動作確認用
テストテキスト
このように、「red-text」「bold-text」の二つのclassが削除されたことで、「赤色でかつ太字の文字」が「黒色でかつ細字の文字」へと変わっていることがご確認いただけたかと思います。
jQueryでclassの追加・削除を繰り返す方法:toggleClass()
jQueryには、classの追加・削除を繰り返すtoggleClass()という便利なメソッドも用意されています。
このtoggleClass()メソッドを使うと、指定したclassが存在する場合にはそのclassを削除し、存在しない場合にはそのclassを追加してくれます。
基本的な使い方はaddClass()やremoveClass()と同じで、追加・削除したいclassを引数に指定するだけで大丈夫です。
基本的な使い方
$(セレクタ).toggleClass(class名)
実装コード
<p id="test-text5">テストテキスト</p>
<button onClick="clickButton3()">クラスを追加or削除</button>
<script>
function clickButton3() {
$("#test-text5").toggleClass("red-text")
}
</script>
<style>
.red-text {
color: red;
}
</style>
動作確認用
テストテキスト
上記のボタンを押していただくと、テキストの色が「黒→赤」へ、そしてまた「赤→黒」へ戻っていくのがご確認頂けたかと思います。
このtoggleClass()メソッドを知らないと、「if文を使って『classがある場合とない場合』で条件分岐を作って処理する」ということになってしまいがちですので、ぜひこの機会に覚えておいてくださいね。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、jQueryを使ってclassを追加・削除する方法について解説してきましたがいかがでしたか?
中には、「addClass()メソッドやremoveClass()メソッドは知っていたけどtoggleClass()メソッドは知らなかった…」という方もいらっしゃるのではないでしょうか?
classの追加・削除を繰り返す処理であれば、わざわざ条件分岐をしなくてもtoggleClass()メソッドを使えば簡単に実装できますので、ぜひこの機会に覚えておいてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptでclassを追加するにはどうしたらいいの?・classListとclassNameってどう使い分けたらいいの?・classを削除したり切り替えたりす[…]