                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

求指点迷津,我的onload函数哪里写错了,得不到想要的结果 !!

求大神指点一下迷津,我写的错在哪里?

window.onload = function(){ 
         var tr = document.getElementsByTagName("tr");
         for ( var i=0;i<tr.length;i++ ){
                //循环遍历改变属性及方法;
                 tr[i].onmouseover = function(){
                          tr[i].style.backgroundColor = "#f2f2f2";
                };
                tr[i].onmouseout = function(){
                          tr[i].style.backgroundColor = "#fff";
                }; 
        } 
}

一点儿也不

2015-11-16

源自：JavaScript进阶篇 9-22

关注问题我要回答

520

操作

收起

3 回答

李晓健回答被采纳 +3 积分
2015-11-17

window.onload = function(){
        var tr = document.getElementsByTagName("tr");        
        for ( var i=0;i<tr.length;i++ ){
            var ctr = tr[i];
            (function(ctr){
                ctr.onmouseover = function(){
                    ctr.style.backgroundColor = "#f2f2f2";
                };
                ctr.onmouseout = function(){
                    ctr.style.backgroundColor = "#fff";
                };
            }(ctr))
        }
    }

window.onload = function(){
        var tr = document.getElementsByTagName("tr");
        for ( var i=0;i<tr.length;i++ ){
            var ctr = tr[i];
            //循环遍历改变属性及方法;
            tr[i].onmouseover = function(){
                this.style.backgroundColor = "#f2f2f2";
            };
            tr[i].onmouseout = function(){
                this.style.backgroundColor = "#fff";
           };
        }
    }

以上两种方法都可以

1 回复有任何疑惑可以回复我~

收起回答

一点儿也不提问者

我想问下，为什么用数组引用出来的元素不能直接使用呢？是在循环的过程中，跟C语言不一样吗，这个i不是按照顺序实现的吗？

2015-11-17 回复有任何疑惑可以回复我~

李晓健回复一点儿也不提问者

你可把你的那个 i 弹出来看一下，这个i是你的tr的长度加1 不是循环里一直增加的那个数。如果你非要这么用，可以像上面我写的第一种方法那个，把i传到一个闭包里用。

2015-11-17 回复有任何疑惑可以回复我~

一点儿也不提问者

非常感谢！

2015-11-18 回复有任何疑惑可以回复我~

荼酒
2015-11-17

this表示当前对象啊，你每个tr都绑定了mouseover事件，鼠标经过当前对象后触发事件～改变背景颜色，

如果是tr[i].style.backgroundColor = "#f2f2f2"; 那么这里的i无法指向当前经过了哪个对象。

2 回复有任何疑惑可以回复我~

收起回答

一点儿也不提问者

为什么这个i无法指向当前所经过的对象呢，不是用tr[i]引用出来了吗？

2015-11-17 回复有任何疑惑可以回复我~

vivian_xu 回复一点儿也不提问者

我是这样理解的，这个遍历是给每个TagName为tr加上onmouseover和onmouseout事件，表现到HTML代码中就是 <tr onmouseover="function(){ tr[i].style.backgroundColor = "#f2f2f2";}" onmouseout="function(){ tr[i].style.backgroundColor = "#fff";}"> 于是你就可以看出来，那个tr[i]他并不知道是什么东西。。。。我也是新手啊，理解也不一定对的。而且this真的感觉好复杂。。。。 - -

2015-11-18 回复有任何疑惑可以回复我~

一点儿也不提问者回复 vivian_xu

好像是这么个理。它复制的有点类似于文本，而不是根据实际来改变对象属性。

2015-11-29 回复有任何疑惑可以回复我~