MENU
  1. ホーム
  2. JS
  3. jQuery
  4. 要素のクラス切り替え

要素のクラス切り替え

jQuery
2024.05.12

toggleClassメソッドは、要素のクラスをトグル(切り替え)します。

toggleClass
記法

$(“対象要素”).toggleClass(“クラス名”);

<!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>toggleClassメソッドについて</title>
  </head>
  <body>
    <p>ボックスをクリックしてみて！</p>
    <div class="box"></div>

    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  $(".box").click(function () {
    $(this).toggleClass("highlight");
  });
});
.box {
  width: 80px;
  height: 80px;
  background-color: blue;
  /* サイズ変更と回転のアニメーション */
  /* 背景色の変化を0.5秒かけてアニメーション化 */
  transition: background-color 0.5s ease, width 0.5s ease, height 0.5s ease,
    transform 0.5s ease;
}
.highlight {
  width: 120px; /* クリック時にサイズを変更 */
  height: 120px;
  transform: rotate(45deg); /* クリック時に回転 */
  background-color: red;
}
出力結果

ボックスをクリックしてみて！

jQuery