请问为什么无法实现改变字体阴影的颜色

<html>   
  <head>   
  <META   content="text/html;   charset=gb2312"   http-equiv=Content-Type>   
  <title>滤镜</title>   
      <style>   
          div   {font-family:   黑体; filter:dropshadow(color=#0000FF,offX=5,offY=3,Positive=1);  font-size:   45px;   height:   64}    
      </style>   
  </head>   
    
  <body>   
  
  
  <script language="JavaScript">text = "欢迎光临--网页吧"; 
color1 = "000000"; 
color2 = "red"; 
fontsize = "10"; 
speed = 100;  
i = 0;
if (navigator.appName == "Netscape") {
document.write("<layer id=a visibility=show></layer><br><br><br>");
}
else {
document.write("<div id=a></div>");
}
function changeCharColor() {
if (navigator.appName == "Netscape") {
document.a.document.write("<font face=arial  filter:dropshadow(color=lightgreen,offX=5,offY=3,Positive=1) size =" + fontsize + "><font color=" + color1 + ">");
for (var j = 0; j < text.length; j++) {
if(j == i) {
//document.a.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");
document.a.document.write("<font face=arial  filter:dropshadow(color=lightgreen,offX=5,offY=3,Positive=1) color=" + color2 + ">" + Text.charAt(i) + "</font>");
}
else {
document.a.document.write(text.charAt(j));
}
}
document.a.document.write('</font></font>');
document.a.document.close();
}
if (navigator.appName == "Microsoft Internet Explorer") {
str = "<font face=arial size=" + fontsize + "><font color=" + color1 + ">";
for (var j = 0; j < text.length; j++) {
if( j == i) {
str += "<font face=arial  filter:dropshadow(color=lightgreen,offX=5,offY=3,Positive=1) color=" + color2 + ">" + text.charAt(i) + "</font>";
}
else {
str += text.charAt(j);
}
}
str += "</font></font>";
document.fgcolor = yellow;
a.innerHTML = str;
}
(i == text.length) ? i=0 : i++;
}
setInterval("changeCharColor()", speed);
// End -->
</script>
 
  </body>   
  </html>  这份代码是我根据网上的修改的，为什么在javascript里可以改变设置的字体的颜色，但我添加改变阴影颜色的功能却实现不了呢？麻烦高手解答，谢谢。如果这种方法无法实现，那怎么才能使网页中字体阴影的颜色不断变化呢？