Help us understand the problem. What is going on with this article?

【JavaScript】classListの使い方まとめ(add.remove.contains.toggle)

More than 1 year has passed since last update.

classListとは

特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティです!
classListの後にメソッドを定義することにより、追加削除などの機能を指定することができます!

主なclassListのメソッド

メソッド名 機能
add クラスを追加する
remove クラスを削除する
contains クラスが含まれているか確認する
toggle クラスが含まれていれば削除、
含まれていなければ追加する

例で解説!

まずは下準備

では上記のメソッドを指定した際のclassListの挙動を、簡単な例で解説します!
例えば以下のようなhtmlファイルとCSSファイルがあるとします。

classList.html
<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="../style/classlist.css">
    <title>クラスリストテスト</title>
  </head>
  <body>
  <!-- ここから -->
    <div id = "test">ここの色が変わるよ!</div>
    <div id = "btn">押して!</div>
  <!-- ここまでに注目 -->
  <!-- jsでidを取得したいので、id名をここで指定しています。 -->
    <script src = "../js/classlist.js"></script>
  </body>
</html>
classList.css
body {
  margin: 20px 100px;;
}

#test {
  width: 250px;
  height:100px;
  text-align: center;
  line-height: 100px;
  font-size:20px;
  border:2px solid black;
}

#btn{
 width: 250px;
 height:50px;
 border-radius: 25px;
 background-color: black;
 color: white;
 text-align: center;
 line-height: 50px;
 margin-top: 15px;
 cursor: pointer;
}

ブラウザに表示すると
image.png
このような感じ!
黒いボタンを押すことで、白い四角の背景色を変えたいと思います。
今はjsファイルも、押した後のcssプロパティも何も指定していないので押しても変わりません。

jsファイルの編集

ボタンを押した時にボックスの色が変わるように設定していきます。
流れとしては、
①ボタンをクリックすると、classList.addによって新しくtest2クラスが追加される。
②もう一度クリックすると、classList.removeによってtest2クラスが削除される。

以下にjsファイルとcssファイルを載せておきます!

test.js
'use strict'
{
  const test = document.getElementById('test');
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    if(test.classList.contains('test2')){
  // containsメソッドで、test2クラスが既に付与されているか判定 
      test.classList.remove('test2');
  // test2クラスがついている場合、test2クラスを削除する 
    }else{
      test.classList.add('test2');
  // test2クラスがついていない場合、test2クラスを追加する 
    }
  });
}

CSSファイルに追加するクラス(test2)のプロパティを追加!

test.css
.test2 {
  background-color: hotpink;
}

addEventListenerで、ボタンがクリックされた時の内容を指定しています。
クリックされた時にtest2クラスがついていなければtest2クラスを追加。
test2クラスが既についていたら削除です。
ついているかいないかを、classList.contains('クラス名')を使うことで判定しています。

うまくいくと、1回目クリックした時は以下のようにボックスがピンク色になります。
さらにクリックすると白に戻るはずです。
image.png

toggleメソッド

今回は条件分岐を使用して色を変更しましたが、
条件分岐を使用せずに上記の動作を実装できるのがtoggleです!
最初にもちらっと説明しましたが、toggleを使用すると
test2クラスがついている時は削除して、ついていない時は追加するという判断を自動で行ってくれます!
つまり上記のjsファイルが以下だけになります。

test.js
'use strict'
{
  const test = document.getElementById('test');
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
   test.classList.toggle('test2');
 });
}

さいごに

classListは簡単にクラスの追加や削除ができて便利ですね!
状況に応じてメソッドを使い分けてマスターしましょう:girl_tone1:

tomokichi_ruby
販売業から未経験でエンジニア転職を目指し、自社開発企業から内定頂き今年入社しました💻学んだことをアウトプットしていきたいと思います! 20代♀/おしゃれ/美容/旅行好き
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away