はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。
classListとは
『classList』とは特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティで、classListの後にメソッドを定義することにより、追加削除などの機能を指定することができる。
classListに用意されているメソッド
| メソッド名 | 機能 |
|---|---|
| add | クラスを追加する |
| remove | クラスを削除する |
| contains | クラスが含まれているか確認する |
| toggle | クラスが含まれていれば削除、含まれていなければ追加する |
addメソッドとは
『addメソッド』とは指定した文字列などをclassに対して追加するメソッド。classはHTMLのスタイル指定に使う属性。
JavaScriptでHTMLのタグを取得すると、「classList」がプロパティとして入る。classListは、HTMLのclassの変更や削除などの操作をするメソッドを持っており、その中の要素に対して追加を行うメソッドがaddとなる。
addメソッドの使い方
JavaScriptでエレメントを取得し、.add(【追加するクラス名】)とすることで使用可能。
class属性を追加する方法
addメソッドを使用した場合、HTMLにはclass属性が追加される。
追加するクラス名を複数指定することで、複数のクラスを追加することも可能。
add() 使用例
sample : 1
① add()はclassの追加ができ、例として、ボタンクリックでclassを追加するようにする。
<div id="sample">サンプル</div>
<button id="btn">変更</button>
② 追加するclassによってスタイルが変わるように適当にCSSを用意。
.is-red {
color: red;
}
.is-large {
font-size: 28px;
}
③ 追加したいclass名をadd()で指定したら、ボタンクリック時にclassを追加することができる。
document.getElementById('btn').addEventListener('click', function() {
document.getElementById('sample').classList.add('is-red');
});
sample : ２
① ②を使用する。
③ カンマ区切りで複数のclassも設定できる。ただしIEでは複数指定は対応しておらず、1つ目のclassのみ適用される。
document.getElementById('btn').addEventListener('click', function() {
document.getElementById('sample').classList.add('is-red', 'is-large');
});
sample : 3
① ②を使用する。
③ 配列の形で複数指定も可能です。 ※ この方法はスプレッド構文を使用しているため、対応していないIEだと構文エラーになる。
let classes = ['is-red', 'is-large'];
document.getElementById('btn').addEventListener('click', function() {
document.getElementById('sample').classList.add(...classes);
});
sample :4
① classを追加するためのHTMLを準備。 ※このコードではclassを変更するdivタグにIDとして、targetという名前をつける。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
</head>
<body>
<div id='target' class='red'>ここにclassを追加することでスタイルを変更する</div>
</body>
</html>
② 追加するclassのCSSを準備。 ※ここでは、追加されたことがわかるように色をつけるスタイルを3つ用意する。
.red{
background-color: red;
/* 背景が赤 */
}
.green{
color: green;
/* 文字が緑 */
}
.blue{
border: solid 2px blue;
/* 枠線が青 */
}
③ JavaScriptのソースを作成。 ※ HTMLのdivタグを取得し、classList.addメソッドで2つのclassを追加。
const div = document.getElementById('target');
div.classList.add('greet','blue');
参考サイト
JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法を現役エンジニアが解説【初心者向け】
JavaScriptのclassListを使ってみる
【JavaScript】classListの使い方まとめ(add.remove.contains.toggle)