素のJavaScriptを使って、クリック/タップする度にクラスを追加・削除させる方法をご紹介いたします。
要素にクラスを追加・削除することで、表示・非表示を切り替えたり見た目を変えたりと、色んな制御を行うことができるようになりますね。
クリック/タップする度にJavaScriptでクラスを追加・削除させる方法
今回は、以下のようなHTMLがあると仮定して、#btnをクリックすると#boxにクラスが追加される動きを実装してみたいと思います。
<button id="btn">クリックしてね</button>
<div id="box">ここにクラスを追加</div>JavaScriptは以下のように記述します。
<script>
let btn = document.querySelector('#btn');
let box = document.querySelector('#box');
let btnToggleclass = function(el) {
el.classList.toggle('classname');
}
btn.addEventListener('click', function() {
btnToggleclass(box);
}, false);
</script>まず、querySelectorでクリックする要素とクラスを追加する要素をそれぞれ取得しています。要素を取得する際は、「getElementById」「getElementsByClassName」「getElementsByTagName」を使っても良いです。でもquerySelectorの方がわかりやすいですね。
「let btnToggleclass」でクラスを追加・削除する動きを定義しています。btnToggleclass関数が呼び出される度に、その要素に対して”classname”というクラスが追加・削除されます。「btnToggleclass」と「classname」の部分は任意の名前に変更してください。
最後に、”btn”がクリックされたら”box”に対してbtnToggleclassを実行するという処理を定義しています。
このように、「各要素」「クラスを追加する処理」「クリックした時の実行内容」をそれぞれ定義して動作させます。
例として示したHTMLでいうと、button要素をクリックするとdiv要素に「class=”classname”」が追加されます。再度button要素をクリックすると”classname”が削除されます。
<button id="btn">クリックしてね</button>
<div id="box" class="classname">ここにクラスを追加</div>あとがき
クラスを追加・削除する処理はよく使いますね。覚えておくと制作の幅が広がると思います。
jQuery等のライブラリに頼らず素のJavaScriptで制御したいという時は、ぜひ参考にしていただければと思います。