CSS toggleClassメソッドでCSSのクラスを追加/削除するサンプル
環境
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>
<!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>
<!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のクラスを削除して背景色が消えます。