jQueryでclassを追加・削除する方法【これさえ覚えればOK】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・jQueryでclass属性を追加するにはどうしたらいいの?
・jQueryでclass属性を削除するにはどうしたらいいの?
・jQueryでclass属性を切り替える方法が知りたい!

というお悩みを解決する記事になっています。


この記事の内容

・jQueryでclass属性を追加する方法【addClass()メソッドを使います】
・jQueryでclass属性を削除する方法【removeClass()メソッドを使います】
・jQueryでclass属性を切り替える方法【toggleClass()メソッドを使います】


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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を削除したり切り替えたりす[…]

JavaScriptでclassを追加・削除する方法【全部classListで大丈夫です】