CSS toggleClassメソッドでCSSのクラスを追加/削除するサンプル

2022年10月20日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
$(“セレクター名").toggleClass(CSSクラス名);
指定したCSSのクラスが追加されていない場合追加します。
指定したCSSのクラスが追加されていた場合は削除にします。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft {
    width: 110px;
    height: 60px;
    border: 1px solid #000;
  }
  .cssCft {
    background-color: LightSkyBlue;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnchg").click(function () {
    $(".cft").toggleClass("cssCft");
  });
});
</script>
</head>
<body>

<div class="cft">test</div>
<p><input type="button" id="btnchg" value="変更" /></p>

</body>
</html>

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

CSS

Posted by arkgame

関連記事: