jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル

jQuery を使って CSS の設定を行う方法について、jQuery【 CSS 】colorとfontを変更するサンプルで、cssメソッドを使用したサンプルを紹介しましたが、addClassメソッドや removeClassメソッドを使って CSS の設定を行うこともできます。
今回は、jQuery の addClassメソッドと removeClassメソッドを使用して 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. addClassメソッド

　
jQuery の addClassメソッドを使用して ボックスの背景色を変更します。
各ボタンをクリックしてみて下さい。

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

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // ブルー
  $("#bgBtn1").click(function() {
    // cssで背景色を変更
    $(".bgBox").addClass("bgBlue");
  });
  // ピンク
  $("#bgBtn2").click(function() {
    // cssで背景色を変更
    $(".bgBox").addClass("bgPink");
  });
});
//-->
</script>

<div class="bgBox">
  <input type="button" id="bgBtn1" value="ブルー">
  <input type="button" id="bgBtn2" value="ピンク">
</div>

　
上記のサンプルは、各ボタンを 1 回クリックする場合は「 背景色を変更する 」という意図した動きをしますが、2 回目以降は反応しなくなってしまいます。
次章で紹介する removeClassメソッドを使用すると、この不具合が解消されます。

▲目次へ戻る

2. removeClassメソッド

　
jQuery の addClassメソッドと共に removeClassメソッドも使用して ボックスの背景色を変更、リセットします。
各ボタンをクリックしてみて下さい。

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

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // ブルー
  $("#bgBtn1").click(function() {
    // cssで背景色を変更
    $(".bgBox").addClass("bgBlue");
  });
  // ピンク
  $("#bgBtn2").click(function() {
    // cssで背景色を変更
    $(".bgBox").addClass("bgPink");
  });
  // リセット
  $("#bgBtn3").click(function() {
    // cssの設定をリセット
    $(".bgBox").removeClass("bgBlue bgPink");
  });
});
//-->
</script>

<div class="bgBox">
  <input type="button" id="bgBtn1" value="ブルー">
  <input type="button" id="bgBtn2" value="ピンク">
  <input type="button" id="bgBtn3" value="リセット">
</div>

　
removeClassメソッドを使って CSS の設定を解除することで 背景色を変更するボタンを何度でも使用することができます。

▲目次へ戻る

3. まとめ

jQuery の addClass、removeClass を使ってCSSを変更するサンプルについて、いかがでしたでしょうか。

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

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

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

▲目次へ戻る