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

nas2020/10/12

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

目次

説明 classList
サンプル CSSのクラスを追加/削除する(add/remove)
  CSSのクラスを追加/削除する(toggle)
  CSSのクラスを入れ替える(replace)

classList

変数 = elementNodeReference.classList;

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

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

ボタン1を押すと、CSSのクラスを指定して背景色がピンクになり文字が小さくなります。
ボタン2を押すと、CSSのクラスを指定して背景色が青になり文字が大きくなります。
ボタン3を押すと、removeClassメソッドで設定した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">ボックス１</div>
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<input type="button" value="ボタン2" onclick="clickBtn2()" />
<input type="button" value="ボタン3" onclick="clickBtn3()" />

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

  function clickBtn2() {
    const qs1 = document.querySelector("#box1");
    qs1.classList.remove("cssTest1");
    qs1.classList.add("cssTest2");
  }

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

25行目は、removeメソッドで指定のCSSを削除しています。
26行目は、addメソッドで指定のCSSを追加しています。
37行目は、removeメソッドで複数のCSSを指定して削除しています。

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

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

ボタンを押すと、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を入れ替えています。

関連の記事

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

△上に戻る