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

スポンサーリンク


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

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

これがコードです。

<a href=”javascript:void(0)” onclick=”(function(){var e=document.getElementById(‘print’);e.style.background=’#fff’;e.style.color=’#00f’;e.style.display=’block’;})()”>白背景ブログ</a>
<a href=”javascript:void(0)” onclick=”(function(){var e=document.getElementById(‘print’);e.style.background=’#000′;e.style.color=’#f00′;e.style.display=’block’;})()”>黒背景ブログ</a>
<div id=”print” style=”width:470px;height:300px;margin:0 auto;padding-top:100px;padding-bottom:100px;display:none;”>
<p style=”width:100%;text-align:center”><img src=”画像のURL” border=”0″/><img src=”画像のURL” border=”0″/><br/><span style=”font-size:3em”>私のブログへようこそ&hearts;</span></p></div>

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

参考記事:
色つきの枠で文章を囲みたい(自動改行問題について書いています)

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

<a href=”javascript:void(0)” onclick=”(function(){var e=document.getElementById(‘print’);e.style.background=’#fff’;e.style.color=’#00f’;e.style.display=’block’;})()”>白背景ブログ</a>

<a href=”javascript:void(0)” onclick=”(function(){var e=document.getElementById(‘print’);e.style.background=’#000′;e.style.color=’#f00′;e.style.display=’block’;})()”>黒背景ブログ</a>

<div id=”print” style=”width:470px;height:300px;margin:0 auto;padding-top:100px;padding-bottom:100px;display:none;“>
    <p style=”width:100%;text-align:center”>
        <img src=”画像のURL” border=”0″/>
        <img src=”画像のURL” border=”0″/>
        <br/>
        <span style=”font-size:3em”>私のブログへようこそ&hearts;</span>
    </p>
</div>

これでもまだ見づらい。

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

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

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

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

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

href=”javascript:void(0)”

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

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

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

displayをblockにするのは1回目のクリックだけ行なえばいいんですが、どちらが先にクリックされてもいいように両方で行っています。2回目以降のクリックで、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をいじればいろいろ変えられるということです。

e.style.background=背景を変更
e.style.color=文字色を変更

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


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください