マウスが乗ったら表示されているテキストの色を変える

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  マウスが文字の上に乗ったら色を変更するにはイベントを検知しthis.style.colorに文字の色を指定します。1文字ずつspanタグで囲んで手入力するのは面倒なのでdocument.all[タグ名].innerTextとして文字を読み出しspanタグを設定後に再度document.all[タグ名].innerHTMLで内容を書き戻します。
コード <html> <head> <title>マウスが乗ったら表示されているテキストの色を変える</title> <script language="JavaScript"><!-- function setText(tagName) { text = document.all[tagName].innerText; html = ""; mEvent = "<span style='color:black' onMouseover=this.style.color='red' onMouseout=this.style.color='black'>"; mEnd = "</span>"; for (i=0; i<text.length; i++) { str = text.charAt(i); html= html + mEvent + str + mEnd; } document.all[tagName].innerHTML = html; } // --></script> </head> <body onLoad="setText('myTEXT')"> <p id="myTEXT" style="color:black"> 文字の上にマウスを乗せると1文字ごとに色が変わります。<br> 指定した段落(ブロックタグで囲まれた範囲)だけ指定できます。 </p> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!