class を付け外しする
このレッスンで分かること
- 見た目は CSS に置いたまま、JavaScript は class の付け外しだけをします
classListのaddremovetogglecontainsで、その付け外しができます
色を JavaScript に書くと、CSS を読んでも見た目が分からない
作品カードを 1 枚だけ目立たせたい、としましょう。次のように書けば確かに色は変わります。
JavaScript
const card = document.querySelector(".work-card");
card.style.borderColor = "#0071e3";
card.style.backgroundColor = "#eef4fb";動きますが、この書き方は増えるほど苦しくなります。強調の見た目を変えたくなったとき、CSS ではなく JavaScript を直しに行くことになるからです。CSS を最後まで読んでも、本当の見た目が分からなくなります。
そこで、見た目は CSS に書いておき、JavaScript は class を付け外しするだけにします。プロフィールサイトの CSS には、強調用の指定を先に足してあります。
CSS
/* style.css に用意ずみ */
.work-card.featured {
border-color: #0071e3;
background-color: #eef4fb;
}あとは、目立たせたい相手に featured を足すだけです。足し引きに使うのが classList で、よく使う操作は次の 4 つです。
| 書き方 | すること | 返るもの |
|---|---|---|
el.classList.add("x") | x を足す。もうあれば何もしない | なし |
el.classList.remove("x") | x を外す。無ければ何もしない | なし |
el.classList.toggle("x") | あれば外し、無ければ足す | 足したなら true |
el.classList.contains("x") | x が付いているかを調べる | true / false |
どれも安全に作られていて、いまどうなっているかを確かめずに呼べます。
JavaScript
const hobby = document.querySelector(".hobby-item");
hobby.classList.add("pinned"); // class="hobby-item pinned"
hobby.classList.add("pinned"); // 何も起きない。二重にならない
hobby.classList.remove("pinned"); // class="hobby-item"
hobby.classList.remove("pinned"); // 無いものを外してもエラーにならない
hobby.classList.toggle("pinned"); // 無かったので付いた外したのか、もともと付いていないのか分からない
add してすぐ remove した要素は、見た目では何もしなかった要素と見分けが付きません。うまく動いたのか、1 行目から失敗していたのかも分かりません。そこで contains で状態を聞き、答えを残しておきます。
contains が返すのは true か false です。属性に入れるには文字が要るので、第3章で練習した三項演算子で言葉に直します。
JavaScript
console.log(hobby.classList.contains("pinned")); // true
console.log(hobby.classList.contains("pinned") ? "あり" : "なし"); // "あり"あとは前々回の setAttribute で、その言葉をデータ属性に書き込めば、検証ツールから状態を読み取れます。
className に代入すると、ほかの class まで消える
class を扱う方法はもう 1 つ、className に文字列を代入するやり方があります。ただしこれは class 属性をまるごと差し替えます。
JavaScript
// もともと class="work-card featured" だったとする
card.className = "highlight"; // work-card も featured も消えたすでに画面にある要素をいじるときは classList を使ってください。className が向いているのは、これから自分でつくる新品の要素に、最初の class を与えるときです。
よくある間違い
- class 名に
.を付ける —classList.add(".featured")と書くと「.featured」という名前の class が付き、CSS には当たりません。渡すのは名前だけです - CSS に無い class を付けて悩む —
addは CSS に指定があるかを気にしません。効かないときは、まず検証ツールで class が付いているかを見て、付いていたら CSS のほうを確かめます
課題
cards[0]にclassList.addでfeaturedを付けるcards[2]にfeaturedを付けたあと、classList.removeで外すcards[0]にfeaturedが付いているかをclassList.containsで調べる- 調べた結果を三項演算子で
"yes"か"no"に変え、cards[0]のdata-featured属性に入れる