| ポイント |
<![CDATA[
txt = document.all["strID"].innerText;
c = str.charAt(count);
txt = txt.fontcolor("#"+c+c+"0000");
document.all["strID"].innerHTML = txt;
count++;
if (count > str.length) count = 0;
setTimeout("changeColor('"+str+"')",100);
<body onLoad="changeColor('0123456789abcdefedcba987654321')">
<div id="strID" style="font-weight:900">
]]>
|
| 説 明 |
文字色を変更するにはdocument.all[タグID].innterTextで表示するテキストを読み出します。カウンタを使い文字列からカラーコードを生成します。生成したカラーコードをfontcolor()を使い文字列に適用します。作成されたタグ付きの文字列をdocument.all[タグID].innterHTMLに代入することで文字色を変化させます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字色をリアルタイムに変える</title>
<script Language="JavaScript"><!--
count = 0;
function changeColor(str)
{
txt = document.all["strID"].innerText;
c = str.charAt(count);
txt = txt.fontcolor("#"+c+c+"0000");
document.all["strID"].innerHTML = txt;
count++;
if (count > str.length) count = 0;
setTimeout("changeColor('"+str+"')",100);
}
// --></script>
</head>
<body onLoad="changeColor('0123456789abcdefedcba987654321')">
<div id="strID" style="font-weight:900">ここの文字の色が変わるよ〜ん</div>
</body>
</html>
]]>
|
| 補足説明 |
NN4.5、NN4.06以前では、日本語１文字が2文字（バイト）になるため、正しく抜き出せない場合があります。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字色をリアルタイムに変える