20415


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

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2015-12-27T11:45:32.480
20414
2015-12-27T11:54:47.450
9359
question
javascript
自動的に入れ替わる複数の文字に、違う色をつける方法

[code]

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

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

[code]

    var words = [ '鬼', '蛇' ,'福'];
    var color = ["red", "green", "blue"];
    document.getElementById('output').innerHTML = words[n];
    document.getElementById('output').style.color = color[n];
    
[/code]


CC BY-SA 3.0
2015-12-27T11:54:47.450
20415
2015-12-27T11:54:47.450
5044
20414
answer