| ポイント |
<![CDATA[
txt1 = document.all["strID"].innerText;
txt2 = "";
for (i=0; i<txt1.length; i++)
{
if (count == i) txt2 += "<font color='red'>" + txt1.charAt(i) + "</font>"; else txt2 += txt1.charAt(i);
}
document.all["strID"].innerHTML = txt2;
count++;
if (count > txt1.length) count = 0;
setTimeout("changeColor()",100);
<div id="strID">
]]>
|
| 説 明 |
１文字ずつ色を変更するにはdocument.all[タグID].innterTextで表示するテキストを読み出します。カウンタとfor命令を使い、カウンタの値と文字の位置が一致した場合にfontタグと組み合わせてHTMLデータを変数に入れます。HTMLデータはdocument.all[タグID].innerHTMLに代入することでHTMLタグ付きのテキストを表示することができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字色をリアルタイムに１文字ずつ変える</title>
<script Language="JavaScript"><!--
count = 0;
function changeColor()
{
txt1 = document.all["strID"].innerText;
txt2 = "";
for (i=0; i<txt1.length; i++)
{
if (count == i) txt2 += "<font color='red'>" + txt1.charAt(i) + "</font>"; else txt2 += txt1.charAt(i);
}
document.all["strID"].innerHTML = txt2;
count++;
if (count > txt1.length) count = 0;
setTimeout("changeColor()",100);
}
// --></script>
</head>
<body onLoad="changeColor()">
<div id="strID">ここの文字の色が変わるよ〜ん</div>
</body>
</html>
]]>
|
| 補足説明 |
NN4.5、NN4.06以前では、日本語１文字が2文字（バイト）になるため、正しく抜き出せない場合があります。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字色をリアルタイムに１文字ずつ変える