对于本题修改颜色的不同解法?

来源:9-22 编程练习

慕慕0099883

2018-03-26 19:16

window.onload = function(){


                  


     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。


    


        high();


 


}


     


     function high(){


        var row=document.getElementsByTagName("tr")   ;


        for(var i=0;i<row.length;i++){


            row[i].onmouseover=function(){


                this.style.backgroundColor="#f2f2f2";


            }


            row[i].onmouseout=function(){


                this.style.backgroundColor="#fff";


            }


         } 


    }


    这样的情况下 表格单元行可以变色,但是我不大理解this的用法,还有onclick=del(this)也是不大理解。除开用this还有什么方法吗?

而且为什么设置背景颜色用this.setAttribute("style","backgroundColor:red");这种写法无效呢?


2、function high(){


        var row=document.getElementsByTagName("tr")   ;


        for(var i=0;i<row.length;i++){


            row[i].onmouseover=function(){


                row[i].style.backgroundColor="#f2f2f2";


            }


            row[i].onmouseout=function(){


                row[i].style.backgroundColor="#fff";


            }


         } 


    }


倘若把代码改成这样的话虽然内部匿名函数会执行,但是row[i]的颜色却不会改变。这是为什么呢?

但是我发现同学们的代码

window.onload = function(){

                  

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

           var x=document.getElementsByTagName("tr");

for(var i=0;i<x.length;i++){

  bgc(x[i]);

}

     

 

}

function bgc(tr1){

    tr1.onmouseover=function(){

        tr1.style.backgroundColor="#f2f2f2";

    }

    tr1.onmouseout=function(){

        tr1.style.backgroundColor="#fff";

    }

}

这样传参却是有用的?  for循环所处的位置不一样为什么结果就不一样?

3、继续改变代码

function high(){


        var row=document.getElementsByTagName("tr")   ;


        for(var i=0;i<row.length;i++){


            a=row[i];


            a.onmouseover=function(){


                a.style.backgroundColor="#f2f2f2";


            }


            a.onmouseout=function(){


                a.setAttribute("style","backgroundColor:red");


            }


         } 


    }


这样的话 只有最后一行才能改变颜色而上面几行却无动于衷是为什么?


写回答 关注

1回答

  • 幕容峰
    2018-03-28 23:28:46

    一个css样式就能变色

JavaScript进阶篇

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

468195 学习 · 21891 问题

查看课程

相似问题