为什么在Firefox浏览器中这个JavaScript代码不能运行？

Question

做一个图像翻转器的效果，就是鼠标指向文字时，相框里显示对应的图片。
但是做出来之后，发现只能在ie里面正常显示，在Firefox里面没有效果。
自己试了一下，发现setRoller函数中的语句不能正常执行，但是不知道具体问题出在什么地方？
多谢了！js代码如下window.onload=initRoller;
function initRoller(){
colList=document.getElementById("left").getElementsByTagName("LI");
for(var i=0;i<colList.length;i++){
setRoller(colList(i));
}
}
function setRoller(thisImage){
thisImage.imageToShow=new Image();
thisImage.color=thisImage.currentStyle.color;
thisImage.backgroundColor=thisImage.currentStyle.backgroundColor;
thisImage.imageToShow.src="images/"+thisImage.id+".JPG";
thisImage.onmouseover=showImage;
}
function showImage(){
var oImg=document.getElementById("showImg");
oImg.src=this.imageToShow.src;
changeColor(this)
}
function changeColor(oLi){
for(var i=0;i<colList.length;i++){
if(i==0){
colList(i).runtimeStyle.color=colList(1).color;
colList(i).runtimeStyle.backgroundColor=colList(1).backgroundColor;
}
else{
colList(i).runtimeStyle.color=colList(i).color;
colList(i).runtimeStyle.backgroundColor=colList(i).backgroundColor;
}}
oLi.runtimeStyle.color="#FFFFFF";
oLi.runtimeStyle.backgroundColor="#0066FF";
}CSS如下：*{margin:0;
padding:0;}
#container{
width:740px;
background-color:#CCCCCC;
margin:0 auto;}
#left{width:200px;
float:left;
}
#left ul{margin-top:30px;
}
#left ul li{
font-family:Geneva, Arial, Helvetica, sans-serif;
padding-bottom:10px;
font-size:24px;
text-decoration:underline;
cursor:pointer;
list-style-type:none;
padding:5px 0 5px 30px;}
#horse{
color:#FFFFFF;
background-color:#0066FF;
}
#right{width:430px;
float:left;}
#right img{width:500px;
height:auto;
padding:10px;
border:5px solid #0066FF;
background-color:#FFFFFF;
}
#clear{
clear:both;}html代码如下<div id="container">
<div id="left">
<ul>
<li id="horse">horse</li>
<li id="grassland">grassland</li>
<li id="flowersea">flowersea</li>
<li id="sunflower">sunflower</li>
</ul>
</div>
<div id="right"><img src="images/horse.JPG" id="showImg"></div>
<div id="clear"></div>
</div>

Answer 1

firfox的是加载前的window事件
IE的是加载后的事件，并且body也具有该事件

Answer 2

参考http://www.cnblogs.com/jinho/archive/2010/03/29/1700153.html

Answer 3

colList(1)NodeList和数组应该使用[]来访问吧，
试试：
colList[i]

Answer 4

能否更具体一点？
怎么样写才能使这个代码兼容Firefox浏览器啊？
多谢了：）

Answer 5

firfox不支持currentStyle，兼容一下， SUCH AS ——function getcss($){
     $.currentStyle || document.defaultView.getComputedStyle($, null)
}

Answer 6

colList[i]这个是我弄错了，但是改回方括号之后Firefox还是不行啊~

Answer 7

明白，多谢了~~~~~~~
错误控制台的提示：错误： thisImage.currentStyle is undefined
原来是这个原因

Answer 8

//根据以上浏览器检测,我需要解决js不能同时使用多个window.onload = function(){}问题
if(Sys.ie){     window.attachEvent('onload',handler);}else if(Sys.firefox){
     window.addEventListener('load',function(){alert('ff');},false);}//建议每次需要在 window.onload 里面写事件的时候都这样写！因为当团队开发时,引用了外部js,或者引用了Usercontrol的时候！ 你不能保证别人没有在外部js和Usercontrol里面的js没有使用过window.onload,如果使用过则只会认最后一个！我就遇到过这个问题！而且当时也不知道这个原因！

Answer 9

这个能不能给个范例。
我初学，firefox的很多东西都不熟，自己刚刚试了几次，都不行~
谢了啊~

Answer 10

firefox 没有 runtimeStyle和currentStyle 和属性. 用style

Answer 11

我给你重新写一个，注意观察Observer设计模式：<style>
*{margin:0;padding:0;}
#container{width:740px;background-color:#CCCCCC;margin:0 auto;}
#left{width:200px;float:left;}
#left ul{margin-top:30px;}
#left ul li{font-family:Geneva, Arial, Helvetica, sans-serif;padding-bottom:10px;
font-size:24px;text-decoration:underline;cursor:pointer;list-style-type:none;
padding:5px 0 5px 30px;}#left ul li.hot{
color:#FFFFFF;
background-color:#0066FF;
}#right{width:430px;float:left;}
#right img{width:500px;height:500px;padding:10px;border:5px solid #0066FF;background-color:#FFFFFF;}
#clear{clear:both;}
</style><script type=text/javascript>
function $(o){
       return "function" == typeof o ? (window.onload = o) : "string" == typeof o ? !/>>/.test(o) &&
       document.getElementById(o)||$(o.split(">>>")[0]).getElementsByTagName(o.split(">>>")[1]) : null
}
$.clss = function(m, c){
       var c = c || function(o){for(var p in o) this[p] = o[p]};
       c.prototype = m; 
       return c
}$(function(){
       new ($.clss({
              bind : function(){
                     var self = this;
                     this.butn[this.init].className = "hot";
                     this.cont.src = this.path + this.butn[this.init].id + ".jpg";
                     for(var i=0; this.butn[i]; i++)
                     this.butn[i].onmouseover = function(){
                            self.show(this)
                     } 
              },
              show : function(o){
                     for(var i=0; i<this.butn.length; i++)
                     this.butn[i].className = "";
                     o.className = "hot";
                     this.cont.src = this.path + o.id +".jpg";
              }
       }))({butn:$("left>>>li"), cont:$("showImg"), path:"http://avatar.profile.csdn.net/", init:2}).bind()
})
</script><div id="container">
<div id="left">
<ul>
<li id="1/5/1/2_lihui_shine">horse</li>
<li id="C/6/1/2_suiye007">grassland</li>
<li id="6/D/1/2_sohighthesky">flowersea</li>
<li id="F/1/8/2_dudp1985">sunflower</li>
</ul>
</div>
<div id="right"><img id="showImg"></div>
<div id="clear"></div>
</div>

Answer 12

<style>
*{margin:0;padding:0;}
#container{width:740px;background-color:#CCCCCC;margin:0 auto;}
#left{width:200px;float:left;}
#left ul{margin-top:30px;}
#left ul li{font-family:Geneva, Arial, Helvetica, sans-serif;padding-bottom:10px;
font-size:24px;text-decoration:underline;cursor:pointer;list-style-type:none;
padding:5px 0 5px 30px;}#left ul li.hot{
color:#FFFFFF;
background-color:#0066FF;
}#right{width:430px;float:left;}
#right img{width:500px;height:500px;padding:10px;border:5px solid #0066FF;background-color:#FFFFFF;}
#clear{clear:both;}
</style><script type=text/javascript>
function $(o){
       return "function" == typeof o ? (window.onload = o) : "string" == typeof o ? ! />>>/.test(o) &&
       document.getElementById(o)||$(o.split(">>>")[0]).getElementsByTagName(o.split(">>>")[1]) : null
}
$.clss = function(m, c){
       var c = c || function(o){for(var p in o) this[p] = o[p]};
       c.prototype = m; 
       return c
}$(function(){
       new ($.clss({
              bind : function(){
                     var self = this;
                     this.butn[this.init].className = "hot";
                     this.cont.src = this.path + this.butn[this.init].id + ".jpg";
                     for(var i=0; this.butn[i]; i++)
                     this.butn[i].onmouseover = function(){
                            self.show(this)
                     } 
              },
              show : function(o){
                     for(var i=0; this.butn[i]; i++)
                     this.butn[i].className = "";
                     o.className = "hot";
                     this.cont.src = this.path + o.id +".jpg";
              }
       }))({butn:$("left>>>li"), cont:$("showImg"), path:"http://avatar.profile.csdn.net/", init:2}).bind()
})
</script><div id="container">
<div id="left">
<ul>
<li id="1/5/1/2_lihui_shine">horse</li>
<li id="C/6/1/2_suiye007">grassland</li>
<li id="6/D/1/2_sohighthesky">flowersea</li>
<li id="F/1/8/2_dudp1985">sunflower</li>
</ul>
</div>
<div id="right"><img id="showImg"></div>
<div id="clear"></div>
</div>