MENU
  1. ホーム
  2. JS
  3. jQuery
  4. 要素にクラス追加・削除

要素にクラス追加・削除

jQuery
2024.05.12

指定したHTML要素に新しいクラス追加・クラス削除をします。

addClass : クラス追加
removeClass : クラス削除

addClass / removeClass
記法

$(“対象要素”).addClass(“追加クラス”);
$(“対象要素”).removeClass(“削除クラス”);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>addClassとremoveClassについて</title>
  </head>
  <body>
    <div id="targetElement">この要素にクラスを追加・削除します。</div>
    <button id="addButton">クラスを追加</button>
    <button id="removeButton">クラスを削除</button>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  $("#addButton").click(function () {
    // highlightクラス追加
    $("#targetElement").addClass("highlight");
  });

  $("#removeButton").click(function () {
    // highlightクラス削除
    $("#targetElement").removeClass("highlight");
  });
});
.highlight {
  background-color: yellow;
  font-weight: bold;
}
出力結果
この要素にクラスを追加・削除します。
jQuery