ボタンを押したら色を変える

JavaScriptの３回目です。
今後、数が増えたらカテゴリーアーカイブのJavaScriptをクリックしてもらえば、まとめて見られます。

今回はテンプレートの背景色という記事のソースを使って説明します。
ここをクリックしてもらえば「テンプレートの背景色」が別窓で開きます。

これがコードです。

改行していないので非常に見づらいです。改行しない理由は下の記事を見てください。

とはいえ、これではどうしようもないので、改行して表示します。
実際は改行していないことだけ了承してください。

これでもまだ見づらい。

aタグで括られた、上の２つのブロックは、自動改行問題とは別の理由ですが、やはり改行できません。詳しい説明はしませんが、ファンブログの仕様です。
（bodyタグの中でscriptタグが使えないため、外部関数として書けない）

３つ目のブロックは、画像を埋め込んで非表示にしています。これはボタンを押したら画像を表示と同じ仕組みです。最初のクリックで、display:blockに変換されます。

aタグをボタン代わりに使う

前回まではボタンを押したら、JavaScriptが作動しましたが、onclick はボタン以外でも使えます。

今回はリンク用のタグ a の onclick を使っています。
ただし、本来aタグはクリックしたらリンク先へ飛ぶものですので、その作用を無効にしないと誤作動します。

javascript:void(0)は何もしないコードです。つまり、リンク先へ飛ぶところに何もしないスクリプトを割り当てることで、作用を無効にしています。

白背景ブログという文字をクリックした時と、黒背景ブログという文字をクリックした時で違うのは２行だけです。どちらも同じ４つの処理で進みます。

まず、idがprintのタグを探す。
背景色を変える。
文字色を変える。
displayをblockにする。

displayをblockにするのは１回目のクリックだけ行なえばいいんですが、どちらが先にクリックされてもいいように両方で行っています。２回目以降のクリックで、display=’block’されるのは無意味なだけで害はありません。

白背景ブログという文字をクリックした時のコード説明

var e=document.getElementById(‘print‘);
idがprintのタグを探して、eに入れてください。

e.style.background=’#fff‘;
e（つまりidがprintのタグ）のスタイルシートのbackgroundを#fff（白）にしてください。

e.style.color=’#00f‘;
e（つまりidがprintのタグ）のスタイルシートのcolorを#00f（青）にしてください。

e.style.display=’block‘;
e（つまりidがprintのタグ）のスタイルシートのdisplayをblockにしてください。

黒背景ブログという文字をクリックした時のコード説明

var e=document.getElementById(‘print‘);
idがprintのタグを探して、eに入れてください。

e.style.background=’#000‘;
e（つまりidがprintのタグ）のスタイルシートのbackgroundを#000（黒）にしてください。

e.style.color=’#f00‘;
e（つまりidがprintのタグ）のスタイルシートのcolorを#f00（赤）にしてください。

e.style.display=’block‘;
e（つまりidがprintのタグ）のスタイルシートのdisplayをblockにしてください。

今回大事なのはdocument.getElementById(id)で取得したエレメント（e)のstyleをいじればいろいろ変えられるということです。

エレメント名.style.の後につづくのはcolorであったり、backgroundであったり、スタイルシートと同じで、指定方法も一緒です。