自動的に入れ替わる複数の文字に、違う色をつける方法

投稿者: Anonymous

下記のソースコードは、3つの文字が自動的に入れ替わって表示されるものです。、
これらの文字に、それぞれ違う色を設定したくて、番号を打って見たり、CSSで試みたのですが、組み立てがうまくいきません。どうすれば、それぞれの文字に違う色を設定できるでしょうか。
ご教示ください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
 <meta http-equiv="Content-Script-Type" content="text/javascript">


 <TITLE>それぞれの文字に色をつける</TITLE> 

 <script type="text/javascript">
<!--
 var n = 0;
 function wordChange(){
var iv = 3000;
var words = [ '鬼', '蛇' ,'福'];
document.getElementById('output').innerHTML = words[n];
 n++;
 if (n > words.length - 1) n = 0;
 setTimeout(wordChange, iv);

 }
 window.onload = function() { wordChange(); }

//-->
 </script>

 </head>

 <BODY>

 <SCRIPT type="text/javascript">
 <!--
document.write("<p>");
document.write("<span id='output' style='font-size:26px; font-weight:bold;'></span>");
document.write("</p>");
//-->
</script>

 </BODY>
 </HTML>

解決

var words = [ '鬼', '蛇' ,'福'];
document.getElementById('output').innerHTML = words[n];

の部分にそれぞれの文字に対応する色を設定するコードを次のように追加します。

var words = [ '鬼', '蛇' ,'福'];
var color = ["red", "green", "blue"];
document.getElementById('output').innerHTML = words[n];
document.getElementById('output').style.color = color[n];
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *