JavaScript PR

JavaScriptでボタンを押したら指定要素にclassを追加・削除する方法

JavaScriptでclassを追加・削除する
記事内に商品プロモーションを含む場合があります

生のJavaScriptでボタンを押したら指定要素にclassを追加・削除する方法を紹介します。

jQueryでclassの追加・削除を説明している物が多いですが、生のJavaScriptでも簡単に実装することができます。
jQueryじゃなくて、JavaScriptで実装したいという方は参考にしてみてください。

JavaScriptでボタンを押したら指定要素にclassを追加・削除する

まずは、今回使用するHTMLを書いていきます。

<button class="js-btn">ボタン</button>
<div class="content">コンテンツが入ります。</div>

「.btn」をクリックすると、「.content」に新たなclassを追加する想定です。

わかりやすいように、簡単にCSSをを追加しました。
「.content」は最初は表示しない状態にして、「.btn」をクリックされたときに表示させるようにします。

.content{
  display: none;
}
.content.js-active{
  display: block;
}

実際に、新たなclassを追加・削除するようにJavaScriptを追加します。

const content = document.querySelector(".content");
const btn = document.querySelector(".js-btn");
      
btn.addEventListener("click", () => {
  content.classList.toggle("js-active");
});

これで「.btn」をクリックすると、「.content」に新たなclass「.js-active」が追加されます。
更にクリックすると、「.content」に追加されたclass「.js-active」が削除されます。

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。