どうも、チャーさんです。
あなたはjavascriptで、ボタンを押したら、
色が変更できる方法を探していませんか？
この記事では、ボタンクリックで、
色を変更する方法、コード、コードの仕組みについて、
書いています。
なので、あなたがこの記事を読めば、
あなたはjavascriptでボタンを押したら色が、
変更できるというのをできるようになるでしょう。
ということで、あなたがボタンで色を変更したいなら、
このまま下にスクロールして読んでみてください。
スポンサードサーチ
目次
javascriptでボタンクリックで色を変更するコード
はい、で、まず結論からいきまして、
javascriptでボタンクリックで色を変更するには、
以下のコードを使えば可能です。
<body>
<p class=”change”>ここの文字の色が変わります</p>
<button>ここを押すと色が変わります。</button>
<script>
let button = document.querySelector(‘button’);
let text = document.querySelector(‘.change’);
button.addEventListener(‘click’,function(){
text.style.color =”red”;
});
</script>
</body>
ということで、上記のコードを、
この記事に埋め込みました。
以下のボタンを、
クリックしてみてください。
ここの文字の色が変わります
*文字の色が赤に変わります。
はい、というように、
上記で紹介したコードを使えば、
ボタンクリックで色を変更することが可能です。
違う色に変更したい場合
また、色を赤色以外にしたい場合は、
text.style.color =”red”;
の”red”の部分をあなたが変更したい色に、
変えればOKです。
例えば青色にしたければblueにしたらokです。
ちなみに16進数も使用可能です。
例えば”red”のとこに、”#006400″と入力すると、
緑色になります。
16進数の色のコードは、
検索で16進数 色と検索すれば、
コードがでてくるのでそれを参考にしてください。
スポンサードサーチ
ボタンクリックで色を変更するコードの説明
ということで、コードの説明に入ります。
今回のこのコード、
<body>
<p class=”change”>ここの文字の色が変わります</p>
<button>ここを押すと色が変わります。</button>
<script>
let button = document.querySelector(‘button’);
let text = document.querySelector(‘.change’);
button.addEventListener(‘click’,function(){
text.style.color =”red”;
});
</script>
</body>
では、addEventListenerというのを使い、
ボタンがクリックされたら色が変更する仕組みに
なっています。
実際に色を変えるためのコードは、
text.style.color =”red”;の部分です。
ちなみにこのtextというのは、
let text = document.querySelector(‘.change’);
で、指定した要素を変数に指定してます。
指定した要素というのは、以下の
<p class=”change”>ここの文字の色が変わります</p>
のhtmlの部分です。
なのでボタンをクリックした際に、
この文章の色が変更されるという仕組みです。
で、このコードはこの通りに記述すれば、
すぐにボタンクリックで色を変更するコードとして、
使えます。
が、あなた自身で作りたい時ように手順も
説明しておきます。
コードをあなた自身で作る時の手順
まずは手順１として、
htmlなどで色を変更させたい要素と、
ボタンを用意しましょう。
僕の例でいうと、
<p class=”change”>ここの文字の色が変わります</p>
<button>ここを押すと色が変わります。</button>
これが上記に相当します。
次に、色を変更したい要素と、
ボタンをdocument.querySelector()で、
指定しましょう。
javascriptでは、処理を行う対象になる、
要素を一度取得（指定)してやる必要があります。
でないと、どのボタンがクリックされたら？
どこの色を変えるの？と、
コンピューターが迷ってしまうからです。
なのでコンピューターがわかるように、
要素をしっかり指定する記述をしてやりましょう。
ちなみに、僕の例でいうなら、指定してるのは、
let button = document.querySelector(‘button’);
let text = document.querySelector(‘.change’);
の部分です。
ここでボタンと、色を変えたい文字列(pタグ)
を指定してます。
次に、指定したら、ボタンにクリックイベントを
追加しましょう。
クリックイベントとは、クリックされたときに、
何かしらの変化を起こすというものです。
で、それはaddEventListener()を使えば、
可能なので、button.addEventListenerと書いて、
イベントを追加しましょう。
であとは、引数にclickとfunctionを書き、
指定した要素の色を変更する記述を書きましょう。
ちなみに僕の例でいうなら、
button.addEventListener(‘click’,function(){
text.style.color =”red”;
});
がそれにあたります。
というわけで、上記の手順を踏めば、
あなた自身でもオリジナルで、
コードを組み立てれます。
そして好きにボタンクリックで、
色を変更できるようになりますよ。
スポンサードサーチ
javascriptボタンクリックで色を変更する方法の動画
＊追記 解説動画もとったので、
動画で理解するタイプの場合、こちらもどうぞ。
スポンサードサーチ
まとめ
それではまとめにはいります。
javascriptでボタンクリックで色を変更するには、
以下のコードで可能です。
<body>
<p class=”change”>ここの文字の色が変わります</p>
<button>ここを押すと色が変わります。</button>
<script>
let button = document.querySelector(‘button’);
let text = document.querySelector(‘.change’);
button.addEventListener(‘click’,function(){
text.style.color =”red”;
});
</script>
</body>
また色を変えたい場合は、
redのとこをあなたのしたい色に変更しましょう。
javascriptで動的に色を変更できたら、
あなたのできることが広がっていくので、
ぜひあなた自身でも実践してみてください。
それでは読んでもらってありがとうございました。
チャーさん
