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

みなさんこんにちは!

今回の記事は、

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

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


この記事の内容

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


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で大丈夫です】