「JavaScript」toggleメソッドでCSSのクラスを追加/削除する
環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.62
構文
const 変数名 = document.querySelector(セレクター名);
変数名.classList.toggle(css名);
toggleメソッドを使って、対象のCSSが存在するときは削除し、存在しないときは追加します。
使用例
<!DOCTYPE html> <html> <body> <style> .cft { width: 120px; height: 80px; border: 1px solid #000; } .test{ font-size: 14px; background-color: SkyBlue; } </style> <script> function add() { // クラスcft要素の取得 const tt = document.querySelector(".cft"); //toggleメソッド tt.classList.toggle("test"); } </script> <div class="cft">ボックス</div> <p> <input type="button" value="追加" /></p> </body> </html>
実行結果
「追加」ボタンを押すと、CSSのクラスを指定して背景色が「SkyBlue」になり文字が小さくなります。
再度ボタンを押すとCSSが削除されます。