LoginSignup
15

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-09

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

さらにクラスの操作が便利になっていた

なるほど。追加と削除は分かった。
じゃあクラスの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クラスがあるなら削除します。

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15