実行例

今週のおすすめ！

myFntCnt = 1;	// フォントサイズ
myFntFlg = 1;	// 1:フォントサイズ加算モード 0:フォントサイズ減算モード

function myFunc(){
if (myFntFlg == 1){	// フォントサイズ加算モードか？
if (myFntCnt == 30){	// 最終フォントサイズに達しているか？
myFntFlg = 0;	// 減算モードに変更
myFntCnt-- ;	// フォントサイズを減算
}else{	// 最終フォントサイズに達していない
myFntCnt++;	// フォントサイズを加算
}
}else{	// フォントサイズ減算モードである
if (myFntCnt == 1){	// 先頭フォントサイズまできたか？
myFntFlg = 1;	// 加算モードに変更
myFntCnt++ ;	// フォントサイズを加算
}else{	// 先頭フォントサイズまできていない
myFntCnt--;	// フォントサイズを減算
}
}

document.getElementById("osusume").style.fontSize = myFntCnt+"pt";
}
// --></SCRIPT>
<DIV ID="osusume" style="height:100px;font-size:1.0em">今週のおすすめ！</DIV>
<SCRIPT type="text/javascript"></SCRIPT>

サンプルだけの HTMLはこちらへ

説明

今回は、文字のフォントサイズを変更してみましょう。

背景色の変更は、
document.getElementById("osusume").style.fontSize = フォントサイズ;
です。

style オブジェクトのプロパティさえ分かれば、なんでもできそうなのがわかってきましたね ^^;

その他もろもろの style オブジェクトのプロパティは、リファレンススタイルシート(style)操作を参照してください。

あとは、setInterval でループしながら、フォントサイズを大きくしたり小さくしたりして遊んでみました。
意味はありません。(^^;

参考ステップ
Step.44 日付と時間をリアルタイムに表示してみましょう　
Step.45 文字色をリアルタイムに変更してみましょう　
Step.46 文字の背景色をリアルタイムに変更してみましょう　

▲TOP

実行例

リスト

説明