イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.46 - リアルタイムに背景色を変更する
|
ひとたび表示してしまった文字の色やフォント、フォントサイズ・・・style属性のプロパティは なんでも変更できます。 |
| Step テーマ ● style.backgroundColor - style属性の背景色を変更する |
実行例今週のおすすめ！
|
リスト<script type="text/javascript"><!-- myColTblB = new Array("#FF0000","#FFFFFF"); // 背景色テーブル myColTblF = new Array("#FFFFFF","#FF0000"); // 文字色テーブル myColCnt = 0; function myFunc(){ document.getElementById("osusume").style.backgroundColor = myColTblB[myColCnt]; document.getElementById("osusume").style.color = myColTblF[myColCnt]; myColCnt = ( myColCnt == 1 ) ? 0 : 1; } // --></SCRIPT> <DIV ID="osusume" style="width:140px;color:#000000;background-color:#FFFFFF">今週のおすすめ！</DIV> <script type="text/javascript"><!-- setInterval( "myFunc()", 300 ); // --></SCRIPT> |
| サンプルだけの HTMLは こちらへ |
説明今回は、文字の背景色を変更してみましょう。 前回は、文字色の変更でした。 document.getElementById("osusume").style.color = myColTbl[myColCnt]; 今回は、文字色と背景色を変更します。 document.getElementById("osusume").style.backgroundColor = myColTblB[myColCnt]; document.getElementById("osusume").style.color = myColTblF[myColCnt]; 背景色の変更は、 document.getElementById("osusume").style.backgroundColor = 色コード; です。 あとは、いつものように setInterval でループして、2色を交互に変更します。 myColCnt = ( myColCnt == 1) ? 0 : 1; ● 古臭いブラウザ対応 ログ [IE4] document.all("osusume").style.backgroundColor = myColTblB[myColCnt]; document.all("osusume").style.color = myColTblF[myColCnt]; [NN4] document.osusume.document.open(); document.osusume.document.bgColor=myColTblB[myColCnt]; document.osusume.document.fgColor=myColTblF[myColCnt]; document.osusume.document.write("今週のおすすめ！"); document.osusume.document.close(); ※ その他もろもろの style オブジェクトのプロパティは、リファレンス スタイルシート(style)操作 を参照してください。 参考ステップ Step.44 日付と時間をリアルタイムに表示してみましょう Step.45 文字色をリアルタイムに変更してみましょう Step.47 フォントサイズをリアルタイムに変更してみましょう |
 |