jQuery CSSのクラスを追加/削除する(addClass)

nas2017/10/02

目次

01. CSSのクラスを追加/削除する

・CSSのクラスを追加/削除する(addClass/removeClass)

・CSSのクラスを追加/削除する(toggleClass)

CSSのクラスを追加/削除する(addClass/removeClass)

addClassメソッドとは

removeClassメソッドとは

CSSのクラスを追加/削除するサンプル

ボタン1を押すと、CSSのクラスを指定して背景色がピンクになり文字が小さくなります。
ボタン2を押すと、CSSのクラスを指定して背景色が青になり文字が大きくなります。
ボタン3を押すと、設定したCSSのクラスを解除します。

ボックス１

 

上記サンプルのコードです。

<style>
  .box1 {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .cssTest1 {
    font-size: 14px;
    background-color: MistyRose;
  }
  .cssTest2 {
    font-size: 20px;
    background-color: LightSkyBlue;
  }
</style>

<div class="box1">ボックス１</div>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<input type="button" id="button3" value="ボタン3" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button1").click(function () {
	$(".box1").removeClass("cssTest2");
    $(".box1").addClass("cssTest1");
  });

  $("#button2").click(function () {
	$(".box1").removeClass("cssTest1");
    $(".box1").addClass("cssTest2");
  });

  $("#button3").click(function () {
    $(".box1").removeClass("cssTest1 cssTest2");
  });
</script>

25行目は、removeClassメソッドで指定のCSSを削除しています。
26行目は、addClassメソッドで指定のCSSを追加しています。
35行目は、removeClassメソッドで複数のCSSを指定して削除しています。
引数のクラス名を半角空白で区切っています。

 

CSSのクラスを追加/削除する(toggleClass)

toggleClassメソッドとは

  • 指定したCSSのクラスが追加されていない場合追加します。
  • 指定したCSSのクラスが追加されていた場合は削除にします。
  • 以下はjQueryサイトのtoggleClassメソッドのページです。
    http://api.jquery.com/toggleClass/

CSSのクラスを追加/削除するサンプル

ボタンを押すとCSSのクラスを指定して背景色が青になります。
再度ボタンを押すとCSSのクラスを削除して背景色が消えます。

ボックス

 

上記サンプルのコードです。

<style>
  .box5 {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .cssTest5 {
    background-color: LightSkyBlue;
  }
</style>

<div class="box5">ボックス</div>
<input type="button" id="button5" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button5").click(function () {
    $(".box5").toggleClass("cssTest5");
  });
</script>

18行目のtoggleClassメソッドは、対象のCSSが存在するときは削除し、存在しないときは追加します。

関連の記事

jQuery 要素にCSSを適用するサンプル(css)

△上に戻る