「JavaScript」classListでCSSのクラスを追加/削除するサンプル

2022年2月7日

書式
1.指定のCSSを削除
const 変数名 = document.querySelector(セレクター名);
変数名.classList.remove(CSS名);
2.指定のCSSを追加
const 変数名 = document.querySelector(セレクター名);
変数名.classList.add(CSS名);

使用例

<style>
  #cft {
    width: 200px;
    height: 120px;
    border: 2px solid #000;
  }
 .cssA {
    font-size: 14px;
    background-color: skyblue;
  }
  .cssB {
    font-size: 20px;
    background-color: Yellow;
  }
</style>

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

<script>
  function funA() {
    const qt = document.querySelector("#cft");
    //removeメソッドで指定のCSSを削除
    qt.classList.remove("cssB");
    //addメソッドで指定のCSSを追加
    qt.classList.add("cssA");
  }


</script>

実行結果
「検証」を押すと、CSSのクラスを指定して背景色がskyblueになり文字が小さくなります。