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

鼠标经过改变背景颜色问题

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

为什么这种设置颜色时，总对初始那两行报Cannot read property 'style' of undefined错误，然后只在新增加一行的上面生效。然后我改成图片那种就没有问题了。我感觉这是差不多的啊。

我的添加代码：

HYDMonster

2018-11-21

源自：JavaScript进阶篇 9-22

关注问题我要回答

1886

操作

收起

3 回答

慕粉3414280 回答被采纳 +2 积分
2018-11-21

tableRows[i].style.backgroundColor="yellow";

tableRows[i].style.backgroundColor="#CCC";

你把你的这两行代码改成：this.style.backgroundColor="yellow";this.style.backgroundColor="#CCC";

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

收起回答

HYDMonster 提问者

谢谢哦，这样就没有问题了，你知道是为什么吗

2018-11-21 回复有任何疑惑可以回复我~

海上明月_咫尺天涯
2018-11-22

for循环时用var定义存在变量提升问题，tableRows[i].onmouseover=function(){tableRows[i].style.backgroundColor="yellow";}；当执行移入移除的时候i已经循环到tableRows.length；所以只能是最后一个有效果吧。将tableRows[i]改为this时有效果是因为，this指向的是调用这个方法的对象，tableRows[i].onmouseover=function(){this.style.backgroundColor="yellow";}；this指向的就是tableRows[i]。

我觉得是这个样子，仅供参考

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

收起回答

HYDMonster 提问者

谢谢哦

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