鼠标经过改变背景颜色问题-慕课网

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

来源：9-22 编程练习

HYDMonster

2018-11-21 11:03

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错误，然后只在新增加一行的上面生效。然后我改成图片那种就没有问题了。我感觉这是差不多的啊。

我的添加代码：

写回答关注

3回答

慕粉3414280

2018-11-21 13:43:53

已采纳

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

1 0

HYDMon...

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

2018-11-21 13:56:22

共 1 条回复 >
海上明月_咫尺天涯

2018-11-22 22:42:33

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]。
我觉得是这个样子，仅供参考

1 0

HYDMon...

谢谢哦

2018-11-29 12:24:31

共 1 条回复 >
慕粉3414280

2018-11-21 14:56:12

函数之间存在作用域，具体原理与理论我不太清楚去了.. 大概意思就是tableRows[i]是局部的。。不是全局

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

467393 学习 · 21877 问题

查看课程

相似问题

移动鼠标改变背景颜色，以下代码存在什么问题？

回答 2

回答 3

回答 2

回答 1

回答 1