この記事では、JavaScriptのクリックイベントを実装するプログラミングコードについて解説します。
目次
クリックすると青のボックスが赤に変わる
See the Pen js01 by aqua (@aqua-programdiary) on CodePen.
HTMLコード
<div class="box"></div>
CSSコード
.box { width: 200px; height: 200px; background-color: blue; }
JavaScriptコード
const box = document.querySelector('.box'); box.addEventListener('click',function(){ box.style.backgroundColor = 'red'; });
解説
<div class="box"></div>
:
ページに表示されるボックス要素です。クラス名.box
が指定されており、CSS スタイルが適用されます。.box { ... }
:.box
クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅、高さ、背景色などを指定します。const box = document.querySelector('.box');
querySelector
メソッドを使用して、.box
クラスを持つ要素を取得し、box
という名前の変数に格納しています。box.addEventListener('click',function(){ ... });
box
要素に対してクリックイベントのリスナーを追加しています。クリックが発生したときに実行される関数が定義されています。box.style.backgroundColor = 'red';
クリックイベントが発生したときに、box
要素の背景色を赤に変更します。style
プロパティを使用して要素のスタイルを変更できます。
クリックするとボックスのクラスをトグルして色を切り替える
See the Pen js01-1 by aqua (@aqua-programdiary) on CodePen.
HTMLコード
<div class="box red"></div>
CSSコード
.box { width: 200px; height: 200px; } .red { background-color: red; } .blue { background-color: blue; }
JavaScriptコード
const box = document.querySelector('.box'); box.addEventListener('click',function(){ box.classList.toggle('blue'); });
解説
<div class="box red"></div>
:
ページに表示されるボックス要素です。クラス名.box
と.red
が指定されており、それぞれの CSS スタイルが適用されます。.box { ... }
:.box
クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅と高さを指定します。.red { ... }
:.red
クラスの CSS スタイルが定義されています。このスタイルは、ボックスの背景色を赤に設定します。.blue { ... }
:.blue
クラスの CSS スタイルが定義されています。このスタイルは、ボックスの背景色を青に設定します。const box = document.querySelector('.box');
querySelector
メソッドを使用して、.box
クラスを持つ要素を取得し、box
という名前の変数に格納しています。box.addEventListener('click', function() { ... });
box
要素に対してクリックイベントのリスナーを追加しています。クリックが発生したときに実行される関数が定義されています。box.classList.toggle('blue');
クリックイベントが発生するたびに、box
要素のクラスリストに.blue
クラスをトグル(追加または削除)します。したがって、ボックスの背景色が青と赤の間で切り替わります。
クリックするとボックスのサイズが変わる
See the Pen js01-2 by aqua (@aqua-programdiary) on CodePen.
HTMLコード
<div class="box"></div>
CSSコード
.box { width: 200px; height: 200px; background-color: blue; } .mini-box { width: 100px; height: 100px; background-color: blue; }
JavaScriptコード
const box = document.querySelector('.box'); box.addEventListener('click',function(){ box.classList.remove('box'); box.classList.add('mini-box'); });
解説
<div class="box"></div>
:
ページに表示されるボックス要素です。.box
クラスが指定されており、対応する CSS スタイルが適用されます。.box { ... }
:.box
クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅と高さ、背景色を指定します。.mini-box { ... }
:.mini-box
クラスの CSS スタイルが定義されています。このスタイルは、ボックスの幅と高さ、背景色を指定します。.mini-box
クラスのスタイルは、.box
クラスと同じスタイルですが、サイズが小さくなっています。const box = document.querySelector('.box');
querySelector
メソッドを使用して、.box
クラスを持つ要素を取得し、box
という名前の変数に格納しています。box.addEventListener('click', function() { ... });
box
要素に対してクリックイベントのリスナーを追加しています。クリックが発生したときに実行される関数が定義されています。box.classList.remove('box');
box
要素のクラスリストから.box
クラスを削除します。これにより、.box
クラスに関連するスタイルが適用されなくなります。box.classList.add('mini-box');
box
要素のクラスリストに.mini-box
クラスを追加します。これにより、.mini-box
クラスに関連するスタイルが適用されます。したがって、要素のスタイルが変更されます。