LoginSignup
48

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-02

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

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

今までCSSのクラスを操作する場合は、
追加や削除が何かと面倒でした。

クラスの追加

例えば「ある要素にクラスを追加する」必要があった場合、
クラス名を文字列として連結していました。

var elm = document.getElementById("animal01");
elm.className = "red";
elm.className += " bold";
elm.className += " italic";

これが、HTML5からはaddするだけ。

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

シンプル!

クラスの削除

削除も同様に、面倒くさい処理だったのが

var elm = document.getElementById("animal01");
elm.className = elm.className
  .split(" ")
  .filter(function(c){return c != "bold";})
  .join(" ");

これでOK。

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

まとめ

今回、HTML5の変更点を改めて調べてみたのですが、細かい部分でいろいろと便利になっていることが判明しました。

デザイン界隈ですと、Photoshopで新バージョンが出る毎に「ベテランほど知らない新機能!」的な記事を見かけます。

もちろんそれは、エンジニアにも当てはまりそうですね。

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
48