JavaScript PR

JavaScriptでボタンクリックで指定の要素にclass追加・削除を行う方法

記事内に商品プロモーションを含む場合があります

Vanilla JS(JavaScript)を使用して、ボタンをクリックしたとき、指定の要素にclass追加・削除する方法を紹介します。
よくQ&Aなんかで見かける質問文をクリックすると回答が出てくる仕様なんかに使えます!

ボタンクリックで指定の要素にclass追加・削除する

まず今回使用するHTMLを用意します。

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

 

続いてCSS。
非表示・表示のみの簡単なものにしていますが、必要に応じてアニメーションなどをつけてください。

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

 

今回メインのJavaScript。
「querySelector」で、ボタンと表示する部分を取得して使います。

const content = document.querySelector(".content");
const btn = document.querySelector(".js-btn");
       
btn.addEventListener("click", () => {
  content.classList.toggle("js-active");
});
ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)