JavaScript classListでCSSのクラスを追加/削除

nas2020/10/12

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

目次

サンプル CSSのクラスを追加/削除する(add/remove)
  CSSのクラスを追加/削除する(toggle)
  CSSのクラスを入れ替える(replace)
  CSSのクラスがあるか確認する(contains)

CSSのクラスを追加/削除する(add/remove)

追加を押すと、CSSのクラスを指定して背景色がピンクになり文字が小さくなります。
削除を押すと、設定したCSSのクラスを削除します。

ボックス１

 

上記サンプルのコードです。

<style>
  #box1 {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .cssTest1 {
    font-size: 14px;
    background-color: MistyRose;
  }
</style>

<div id="box1">ボックス１</div>
<input type="button" value="追加" onclick="clickBtnAdd()" />
<input type="button" value="削除" onclick="clickBtnDel()" />

<script>
  function clickBtnAdd() {
    const qs1 = document.querySelector("#box1");
    qs1.classList.add("cssTest1");
  }
  function clickBtnDel() {
    const qs1 = document.querySelector("#box1");
    qs1.classList.remove("cssTest1");
    //qs1.classList.remove("cssTest1", "cssTest2");
  }
</script>

20行目は、addメソッドで指定のCSSを追加しています。
複数のCSSを削除する場合は、25行目のようにカンマ区切りにします。

 

CSSのクラスを追加/削除する(toggle)

ボタンを押すと、CSSのクラスを指定して背景色がピンクになり文字が小さくなります。
再度ボタンを押すとCSSが削除されます。

ボックス

 

上記サンプルのコードです。

<style>
  #box3 {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .cssTest3 {
    font-size: 14px;
    background-color: MistyRose;
  }
</style>

<div id="box3">ボックス</div>
<input type="button" value="ボタン" onclick="clickBtn4()" />

<script>
  function clickBtn4() {
    const qs1 = document.querySelector("#box3");
    qs1.classList.toggle("cssTest3");
  }
</script>

19行目は、toggleメソッドです。対象のCSSが存在するときは削除し、存在しないときは追加します。

 

CSSのクラスを入れ替える(replace)

replace("変更前のCSSのクラス","変更後のCSSのクラス")

replaceメソッドは、CSSを入れ替えることができます。

<style>
  #box1 {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .cssTest1 {
    font-size: 14px;
    background-color: MistyRose;
  }
  .cssTest2 {
    font-size: 20px;
    background-color: LightSkyBlue;
  }
</style>

<div id="box1" class="cssTest1">ボックス１</div>
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<input type="button" value="ボタン2" onclick="clickBtn2()" />

<script>
  function clickBtn1() {
    const qs1 = document.querySelector("#box1");
    qs1.classList.replace("cssTest2", "cssTest1");
  }

  function clickBtn2() {
    const qs1 = document.querySelector("#box1");
    qs1.classList.replace("cssTest1", "cssTest2");
  }
</script>

24,29行目は、replaceメソッドでCSSを入れ替えています。

 

CSSのクラスがあるか確認する(contains)

<style>
  #box1 {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .cssTest1 {
    font-size: 14px;
    background-color: MistyRose;
  }
</style>

<div id="box1">ボックス１</div>
<input type="button" value="追加" onclick="clickBtnAdd()" />

<script>
  function clickBtnAdd() {
    const qs1 = document.querySelector("#box1");
    qs1.classList.add("cssTest1");

    if(qs1.classList.contains('cssTest1')){
      console.log("cssあり"); // cssあり と出力される
    }
  }
</script>

containsはクラスがあるか確認できます。

以下は、MDNのclassListのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

関連の記事

JavaScript querySelector セレクタで要素を取得

△上に戻る