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

11082 ワード
JavaScript JavaScript テキストリンク

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;
}

ブラウザに表示すると

このような感じ！
黒いボタンを押すことで、白い四角の背景色を変えたいと思います。
今は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クラスがついている場合、test２クラスを削除する 
    }else{
      test.classList.add('test2');
　　//　test2クラスがついていない場合、test２クラスを追加する 
    }
  });
}

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

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

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

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

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は簡単にクラスの追加や削除ができて便利ですね！
状況に応じてメソッドを使い分けてマスターしましょう

[python]伯俊11265終わらないパーティー(Floyd-Warshall)
[アルゴリズム]プログラマ-表の編集