「JavaScript」toggleメソッドでCSSのクラスを追加/削除する

2022年10月4日

環境
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="追加" onclick="add()" /></p>
</body>
</html>

実行結果
「追加」ボタンを押すと、CSSのクラスを指定して背景色が「SkyBlue」になり文字が小さくなります。
再度ボタンを押すとCSSが削除されます。

JavaScript

Posted by arkgame

関連投稿: