要素をクリックして色を変更する方法 JavaScript編

ひろ

要素をクリックしたときに、色を変えたいな

フクロウ博士

JavaScriptを要素に設定するとできるよ。

今回は、要素にJavaScriptを設定して、クリックすると色が変わるようにしてみました。

クリックして色が変わる要素の作成手順

まずクリックする要素を作成します。

クリックボタン

<p id="clickbtn">クリックボタン</p>

手順1で作成した要素にJavaScriptを設定します。

1行目にクリックする要素を指定し、2行目に変更したい要素を指定します。2行目に変更したい色（ここでは#0000cd）を指定します。

document.getElementById('clickbtn').addEventListener('click',function(){
document.getElementById('clickbtn').style.background='#0000cd';
});

これで要素をクリックすると、手順2で設定した色に変わります。

クリックボタン