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