jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル

jQuery を使って CSS を追加する際は addClassメソッド、削除する際は removeClassメソッド を使用しますが、その他に toggleClassメソッドを使用する方法もあります。
toggleClassメソッドは、addClassメソッドと removeClassメソッドの機能を切り替えて行う便利なメソッドです。
今回は、jQuery の toggleClassメソッドを使用して CSS を変更する際のサンプルをについて、解説いたします。

jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル（本ページ）
jQuery【 CSS 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル

目次

1. toggleClassメソッド
2. toggleClassで背景色を切り替え
3. toggleClassでハイライトを切り替え
4. まとめ

1. toggleClassメソッド

　
addClassメソッドは jQuery を使って CSS を追加するメソッドで、removeClassメソッドは CSS を削除するメソッドですが、toggleClassメソッドは 指定したクラス名の CSS がある場合は削除を行い、なければ追加する というメソッドです。

toggle（ トグル ）は 「 同一の操作で二つの状態を交互に切り換えること 」を意味しているので、toggleClassメソッドは クラスの追加 と クラスの削除 を切り替える仕組みを持つメソッド というイメージです。

▲目次へ戻る

2. toggleClassで背景色を切り替え

　
jQuery の toggleClassメソッドを使用して ボックスの背景色を「 ブルー ⇔ ピンク 」と変更します。
ボタンを何度かクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<style>
.bgBox{
  background-color:skyblue;
  padding : 20px;
}
.bgPink{
  background-color:pink;
}
</style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#bgBtn").click(function() {
    // cssで背景色を切り替え
    $(".bgBox").toggleClass("bgPink");
  });
});
//-->
</script>

<div class="bgBox">
  <input type="button" id="bgBtn" value="トグル">
</div>

▲目次へ戻る

3. toggleClassでハイライトを切り替え

　
jQuery の toggleClassメソッドを使用して テキストにハイライトを付けたり消したりします。
テキストの上で何度かクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<style>
.bgBox_2{
  background-color:#CCC;
  padding : 20px;
}
.hLight{
  background-color:aqua;
}
</style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("p").click(function() {
    // cssでテキスト上に背景色をon/off
    $(this).toggleClass("hLight");
  });
});
//-->
</script>

<div class="bgBox_2">
  <p>jQuery</p>
  <p>CSS</p>
  <p>toggleClass</p>
</div>

▲目次へ戻る

4. まとめ

jQuery toggleClass を使ってCSSの切り替えを行うサンプルについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る