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

colmun_main9599

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

jQuery を使用した CSS の設定方法については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル

目次

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

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メソッドを使用して テキストにハイライトを付けたり消したりします。
テキストの上で何度かクリックしてみて下さい。

jQuery

CSS

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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です