ここまで、セレクタの取得と、処理を発生させるためのイベントについて学んだと思います。
この記事では、JavaScriptを使ってHTMLの要素に対してclass属性の操作を行っていきます。
「class属性の操作」と言われてもしっくりこないと思いますが、できるようになることとして要素のスタイルの変更・そのアニメーションがあります。
class属性の操作でできること
class属性の操作のイメージを掴むために、次の例のテキストをクリックしてみてください。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
「クリックするとクラスが変わります。」というテキストをクリックしたときに、テキストの色が変わると思います。
詳しくみていくと、最初は、今回でいう.activeはHTMLに存在してません。
<p class="sample-text">
クリックするとクラスが変わります。
</p>.sample-text {
color: #333;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
/* activeクラスはないため、この記述は無視される */
.sample-text.active {
color: #ffbb1e;
}クリックされてJavaScriptの処理により、.active（class名は任意です）が追加されると
<p class="sample-text active">
クリックするとクラスが変わります。
</p>.sample-text {
color: #333; /* 上書きされる */
font-size: 24px;
font-weight: bold;
cursor: pointer;
}.sample-textがついているタグに.activeが追加され、CSSの.sample-text.activeが有効になり、変化が発生します。
この流れで、クラスのつけ外しによる変化やアニメーションを簡単に起こすことが可能となります。
次は、class属性の操作について、具体的な書き方を見ていきます。
class属性を操作する
class属性の操作には大まかに
- class属性を加える：
セレクタ.classList.add() - class属性を取り除く
セレクタ.classList.remove() - class属性を自動的に加える・取り除く
セレクタ.classList.toggle()
の３つがあります。
いずれも共通して、例えば次のような書き方をします。
// class属性を加える：セレクタ.classList.add()
document.querySelector(".sample-text").classList.add("active");
// class属性を取り除くセレクタ.classList.remove()
document.querySelector(".sample-text").classList.remove("active");
// class属性を自動的に加える・取り除くセレクタ.classList.toggle()
document.querySelector(".sample-text").classList.toggle("active");ポイントとして、追加されるclass属性はそのまま名前が入ります。（例だと"is-active"のように.（ドット）が不要）
それぞれを詳しく見ていきます。
classList.add()
先述した例にもあるclassList.add()はセレクタに対してclass属性を追加します。
document.querySelector(".class-name").classList.add("is-active");【class属性が追加される前】
<div class="class-name">
クラスを加えます
</div>【class属性が追加される後】
<div class="class-name is-active">
クラスを加えます
</div>classList.remove()
classList.remove()はセレクタに対してclass属性を取り除きます。
document.querySelector(".class-name").classList.remove("is-active");【class属性が取り除かれる前】
<div class="class-name is-active">
クラスを取り除きます
</div>【class属性が取り除かれる後】
<div class="class-name">
クラスを取り除きます
</div>classList.toggle()
こちらがとても重要です。
classList.toggle()は
- そのclass属性が存在しないとき → class属性を加える
- そのclass属性が存在するとき → class属性を取り除く
という、追加と除去を自動で行ってくれます。
document.querySelector(".class-name").classList.toggle("is-active");処理を実行するときに
<div class="class-name">
クラスをつけ外しします
</div>と、指定のclass属性がなければ、実行後
<div class="class-name is-active">
クラスをつけ外しします
</div>となり、追加されます。
また、処理を実行するときに
<div class="class-name is-active">
クラスをつけ外しします
</div>と、指定のclass属性があれば、実行後
<div class="class-name">
クラスをつけ外しします
</div>となり、取り除かれます。
ハンバーガーメニューなどで非常によく使いますので、最優先で理解しましょう。
class属性の有無を判別する
複雑な処理をするときは、そのclass属性のある or ないを判別したい時があります。
そのときに使うのが
document.querySelector(".class-name").classList.contain("is-active");です。
ポイントとして、
- そのclass属性があれば
trueを返す - そのclass属性がなければ
falseを返す
というもので、if文の条件式に使われることが多いです。
classList.contain()は、やや複雑な処理の中で使われることが多いので、ここでは存在を知ってもらい、出てきた時のことを思い出してもらえれば大丈夫です。
まとめ
今回は、classListを使ってclass属性の操作を行ってきました。
基本的にアニメーションはこれでできるようになったので、色々作って試してみると、身につきます。
