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

2022年2月7日

書式
const 変数名 = document.querySelector(セレクター名);
変数名.classList.toggle(CSSのクラス名);

使用例

<style>
  #cft {
    width: 200px;
    height: 80px;
    border: 1px solid #000;
  }
  .sizecss {
    font-size: 14px;
    background-color: Skyblue;
  }
</style>

<div id="cft">CSSのクラスを追加/削除</div>
<p><input type="button" value="検討" onclick="funA()" /></p>

<script>
  function funA() {
    const qst = document.querySelector("#cft");
    //toggleメソッド 存在する場合削除　存在しない追加
    qst.classList.toggle("sizecss");
  }
</script>

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