More than 5 years have passed since last update.

気が付いたらJSスクラッチ界隈が便利になってた件2

Last updated at 2017-04-23Posted at 2017-04-09

#さらにクラスの操作が便利になっていた
なるほど。追加と削除は分かった。
じゃあクラスのON/OFFは、こう書けばいいんだよね！

##クラスのON/OFF
ONにする1

var elm = document.getElementById("animal01");
if (elm.className.indexOf("red") == -1) {
  elm.classList.add("red");
}

OFFにする1

var elm = document.getElementById("animal01");
if (elm.className.indexOf("red") != -1) {
  elm.classList.remove("red");
}

待て待て。
それだと、redAppleクラスがあったら、バグが起きるでしょ。
ここで正規表現を使ってもいいけど、containsってものがあるみたいだよ。

##containsを使う

ONにする2

var elm = document.getElementById("animal01");
if (!elm.classList.contains("red")) {
    elm.classList.add("red");
}

OFFにする2

var elm = document.getElementById("animal01");
if (elm.classList.contains("red")) {
    elm.classList.remove("red");
}

便利になったね！
でも、className時代の作法を引きずっているね。
classListは、同じクラスを複数追加していいし、存在しないクラスを削除してもいいんだよ。

##クラスの有無を考慮しない
ONにする3

var elm = document.getElementById("animal01");
elm.classList.add("red");

OFFにする3

var elm = document.getElementById("animal01");
elm.classList.remove("red");

シンプル！

でも、classListでON/OFFするには、さらに便利な機能があるみたいだよ。

##toggleを使う

ON/OFFにする

var elm = document.getElementById("animal01");
elm.classList.toggle("red");

これだけ！

toggleは、redクラスが無いなら追加し、redクラスがあるなら削除します。

##まとめ

今まで、containsやtoggleは、jQueryの機能だと思ってました。
いつの間にかスクラッチに取り込まれていたんですね！
今年は、スクラッチをもう一度勉強しなおします。。。