Published on

javascriptでclassの要素をaddしたりremoveしたりする方法(vanilla javascript/jQueryなしで)

Authors
  • avatar
    Name
    ssu
    Twitter

jQueryを使わないで、素のjavascript(vanilla js)でclass要素を追加したり、削除する方法を紹介します。 jQueryに慣れている方も多いと思いますが、vanilla jsでももちろんclass要素の追加、削除はできます。

しかも簡単にできます。具体的には以下のようにすると実現できます。

<html>
<style>
 .hide {
 display: none
}
</style>
<body>
  <p class="info">hoge</p>
  <button id="hide">hide</button>
  <button id="show">show</button>
</body>
<script>
  var hide = document.querySelector("#hide")
  var show = document.querySelector("#show")

  hide.addEventListener('click', function(){
    if (!document.querySelector(".info").classList.contains('hide')) { ////hideという要素がinfoにない場合に実行する。そうしないとたくさん追加されるため
      document.querySelector(".info").classList.add('hide') //hideという要素をinfoのクラスに追加する
    }
  })

  show.addEventListener('click', function(){
    document.querySelector(".info").classList.remove('hide') //hideという要素をinfoのクラスから削除する
  })
</script>
</html>

やっていることは簡単でdocument.querySelector(".info").classList.remove('hide')で hideというクラスを削除し、document.querySelector(".info").classList.add('hide')でinfoというクラスにhideというクラスを追加しています。

今回はボタンを押すと、表示が隠れたり、表示するコードになります。実際に試してみてください。 Use vanilla javascript to add / remove class to a different element after clicking on another one

Discuss on Twitter • View on GitHub