CSSでのクリックイベント【現役エンジニアが解説】
今回は、CSSでのクリックイベントについて、3つの実装方法に分け、簡単に解説していきます。
:activeを用いる
:activeの擬似クラスでクリックイベントを実装できます。
:activeの擬似クラスでは、要素を選択した際に発火させられます。
#hoge:active{ color:red; }
上記のコードでは、idがhogeの要素が選択された際に文字色を赤色にしています。
inputのcheckboxを使用
checkboxを使用することでもクリックイベントを実装可能です。
<label for="checkbox">文字色を変える</label> <input type="checkbox" id="checkbox"> <div id="hoge">ほげ</div>
この場合、checkboxを非表示に、labelを表示させる必要があります。
input + #hoge{ color:black; } input:checked + #hoge{ color:green; } #checkbox{ display:none; }
上記のコードでは、labelがクリックされるとidがhogeの要素の文字色が緑色に変わります。
JavaScriptのonclickを使う
<button type="button" onclick="onButtonClick();">文字色を切り替える</button> <div id="hoge">ほげ</div>
クリックイベントの実装はJavaScriptのonclickを使うと簡単です。
.color-blue{ color:blue; }
ボタンが押されるとidがhogeの要素の文字色が変わるようCSSとJavaScriptを用意します。
function onButtonClick(){ var hoge = document.getElementById("hoge"); if (hoge.classList.contains("color-blue") { hoge.classList.remove("color-blue"); } else { hoge.classList.add("color-blue"); } }
上記のコードでは、ボタンが押されるごとに文字色を青色にするcolor-blueというクラスをidがhogeの要素から追加もしくは削除します。