ITコラム

jQuery CSS toggleClass

jQuery

2018.03.27

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でハイライトを切り替え

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>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.