2021/01/14

CSSでのクリックイベント【現役エンジニアが解説】

PROGRAM

今回は、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の要素から追加もしくは削除します。

• facebook
• Tweet
• Read Later