生の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