今回はJavaScriptでクラスを操作する方法についてまとめたいと思います。
クラスの操作では下記のようなメソッドがあります。
- Element.classList.add(‘クラス名’)：
引数に指定したクラスを要素に追加する。 - Element.classList.remove(‘クラス名’)：
引数に指定したクラスを要素から外す。 - Element.classList.toggle(‘クラス名’)：
引数に指定したクラスを要素に付け外しする。
ではそれぞれもう少し詳しくみていきましょう。
1：Element.classList.add(‘クラス名’)
Element.classList.add()は、引数に指定したクラスを要素に追加するメソッドです。
Element.classList.add('クラス名');
こんなデモを作ってみました。
See the Pen
ZEeyjvL by notebook (@orange-notebook)
on CodePen.
青いボタンがあり、クリックするとactiveクラスが付与されます。
activeクラスが付くと、背景色が赤くなり赤いボタンになる仕組みです。
HTML
<a href="#" class="btn">Click me!</a>btnクラスのついたaタグでボタンを作っています。
CSS
.btn {
text-decoration: none;
color: white;
padding: 1em 2.5em;
background-color: blue;
letter-spacing: 1px;
}
.btn.active {
background: red;
}activeクラスが付与されたときに、backgroundが赤くなるよう設定されています。
JavaScript
const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
this.classList.add('active');
});btn変数の中にボタン要素を入れ、
ボタンにクリックイベントでクリックするとactiveクラスが付与されるようにします。
2：Element.classList.remove(‘クラス名’)
Element.classList.remove()は、引数に指定したクラスを要素に外すメソッドです。
Element.classList.remove('クラス名');
こんなデモを作ってみました。
See the Pen
VwpWByG by notebook (@orange-notebook)
on CodePen.
先ほどの例とほぼ同じですが、
今回はデフォルトでactiveクラスがついていて、ボタンが赤になっています。
ボタンをクリックすると、activeクラスが外れて青いボタンになるよう設定しています。
HTML
<a href="#" class="btn active">Click me!</a>今回はbtnクラスとactiveクラスが付いた状態です。
CSS
.btn {
text-decoration: none;
color: white;
padding: 1em 2.5em;
background-color: blue;
letter-spacing: 1px;
}
.btn.active {
background: red;
}CSSは1つ目のデモと同じです。
JavaScript
const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
this.classList.remove('active');
});btn変数の中にボタン要素を入れ、
ボタンにクリックイベントでクリックするとactiveクラスが外れるようになっています。
3：Element.classList.toggle(‘クラス名’)
Element.classList.toggle()は、
引数に指定したクラスを要素から付け外しするメソッドです。
Element.classList.toggle('クラス名');
こんなデモを作ってみました。
See the Pen
vYxZadQ by notebook (@orange-notebook)
on CodePen.
1番目の例と同様、最初ボタンにactiveクラスはついておらず、青いボタンです。
activeクラスが付くことで赤いボタンになります。
今回はtoggleでクラスの付け外しをするので、
クリックしてactiveクラスが付いていなければactiveクラスを付与し、
activeクラスがすでに付いている場合は外してくれます。
1番目と2番目の例では、
クリックでクラスを追加して終わりか、クラスを外して終わりでしたが、
今回はクリックするたびにボタンの色が変わります。
HTML
<a href="#" class="btn">Click me!</a>デフォルトではactiveクラスはついていません。
CSS
.btn {
text-decoration: none;
color: white;
padding: 1em 2.5em;
background-color: blue;
letter-spacing: 1px;
}
.btn.active {
background: red;
}CSSは1番目と2番目の例と共通です。
JavaScript
const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
this.classList.toggle('active');
});btn変数の中にボタン要素を入れ、ボタンにクリックイベントでクリックすると
activeクラスが付け外しされるようになっています。
おわりに
いかがでしたでしょうか。
デザインを変更する際に、クラスを付け外しすることは多いですよね。
最後までお読みいただき、ありがとうございました！
