jQuery入門 | CSSスタイルおよびプロパティ設定 | クラス設定 .addClass() .removeClass() .hasClass()

Tags:

クラス設定

HTML要素は複数のclass属性値を持つことができる。 jQueryは、HTML要素のclass属性値を簡単に扱うための複数のメソッドを提供している。 提供されるこれらのメソッドを通じて、class属性に適用されるCSSスタイルを動的に適用できる。

メソッド 説明
.addClass() 選択された要素に、引数として渡されたクラスを追加する。
.removeClass() 選択された要素から、引数として渡されたクラスを削除する。
.toggleClass() 選択された要素にクラスがなければ引数として渡されたクラスを追加し、渡されたクラスがすでに追加されていれば削除する。
.hasClass() 引数として渡された値が、選択された要素のクラスとして存在するかを確認する。

クラス属性の追加 .addClass()

.addClass()メソッドでHTML要素にクラス属性を簡単に追加できる。

構文

$(selector).addClass(classname)

例

$(function() {
    $("#btnAdd").on("click", function() {
        $("#one, #two").addClass("blue");
    });
});

クラス属性の削除 .removeClass()

.removeClass()メソッドでHTML要素のクラスを簡単に削除できる。

構文

$(selector).removeClass(classname)

例

$(function() {
    $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
    });
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <style>
    .blue {
        color: blue;
    }
  </style>
  <script>
    $(function() {
      $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
      });
    });
  </script>
</head>
<body>
    <h1>.removeClass() クラス削除</h1>
    <div id="one" class="blue">ボタンを押すとクラスが削除されます。</div>
    <div id="two" class="blue">文字色が黒に変わります。</div>
    <button id="btnRemove">クラス削除</button>
</body>
</html>

クラス属性のトグル .toggleClass()

.toggleClass()メソッドで、HTML要素のクラス追加と削除を交互に実行できる。

構文

$(selector).toggleClass(classname)

例

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

<!DOCTYPE html>
<html lang="ja">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .toggleClass()</title>
    <script>
    $(function() {
        $("#btnToggle").on("click", function() {
          $("#one, #two").toggleClass("blue");
	      });
    });
    </script>
   <style>
    .blue {
        color: blue;
    }
    </style>
</head>
<body>
    <h1>クラストグル</h1>
    <div id="one">ボタンを押すとクラスの追加と削除を交互に実行できます。</div>
    <div id="two">文字色が交互に変わります。</div>
  	<button id="btnToggle">クラストグル</button>
</body>
</html>

クラスの有無確認 .hasClass()

.hasClass()メソッドで、HTML要素にクラスが含まれているかを確認できる。

構文

$(selector).hasClass(classname)

例

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

<!DOCTYPE html>
<html lang="ja">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .hasClass()</title>
    <script>
    $(function() {
        $("#btn").on("click", function() {
            var result = $("#one").hasClass("blue");
            $("#two").html(result);
		});
    });
    </script>
   <style>
    .blue {
        color: blue;
    }
    </style>
</head>
<body>
    <h1>クラス確認</h1>
    <div id="one" class="blue">ボタンを押すとクラスが含まれているか確認できます。</div>
    <div id="two"></div>
  	<button id="btn">クラスの有無確認</button>
</body>
</html>