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