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

colmun_main9571

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

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

目次

 
1.addClassメソッド
2.removeClassメソッド

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 の設定を解除することで 背景色を変更するボタンを何度でも使用することができます。

▲目次へ戻る

コメントを残す

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