Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

javascript javascript ボタン

javascriptでボタンを押したら色が変更できる方法「コード例つき」

投稿日:2019年8月7日 更新日:

Pocket

うも、チャーさんです。

 

あなたは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の部分です。

 

なのでボタンをクリックした際に、

この文章の色が変更されるという仕組みです。

 

 

で、このコードはこの通りに記述すれば、

すぐにボタンクリックで色を変更するコードとして、

使えます。

 

が、あなた自身で作りたい時ように手順も

説明しておきます。

 

コードをあなた自身で作る時の手順

 

まずは手順1として、

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で動的に色を変更できたら、

あなたのできることが広がっていくので、

ぜひあなた自身でも実践してみてください。

 

それでは読んでもらってありがとうございました。

 

チャーさん

-javascript, javascript ボタン


スポンサードサーチ

関連記事

no image

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

どうも、チャーさんです。   あなたはjavascriptでランダムな整数を、 表示したいですか?   この記事では、javascriptでランダムな整数を、 表示するコードと、そ …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

二重ループをjavascriptでする方法

  どうも、チャーさん(@chaa___san)です。   あなたはjavascriptで二重ループを するにはどう書けばいいのか、 と思っていませんか?   この記事で …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

getElementByIdの意味や使い方をわかりやすく紹介します。

  どうも、チャーさんです。   あなたはgetElementByIdの意味はなんだろう? と思ってませんか?   この記事では、getElementByIdの意味や、 …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

no image

javascriptでランダムに画像を表示する方法「コードコピペOKです」

どうも、チャーさんです。   あなたはjavascriptでランダムに画像を、 表示させたいですか?     この記事ではjavascriptでランダムに画像を、 表示さ …

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

no image

javascriptでボタンをクリックしたらアラートが表示されるコード

どうも、チャーさんです。   あなたはjavascriptでボタンをクリックしたら、 アラートが表示される方法とコードを、 探していますか?     この記事では、ボタン …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。