
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.03.27
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でハイライトを切り替え
addClassメソッドは jQuery を使って CSS を追加するメソッドで、removeClassメソッドは CSS を削除するメソッドですが、toggleClassメソッドは 指定したクラス名の CSS がある場合は削除を行い、なければ追加する というメソッドです。
toggle( トグル )は 「 同一の操作で二つの状態を交互に切り換えること 」を意味しているので、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>
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>
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.