kevine099
2016-04-15 18:49
关于鼠标移动改变背景的方法:
1.慕课标准答案:
window.onload = function(){ Highlight(); } function Highlight(){ var tbody = document.getElementById('table').lastChild; trs = tbody.getElementsByTagName('tr'); for(var i =1;i<trs.length;i++){ trs[i].onmouseover = function(){ this.style.backgroundColor ="#f2f2f2"; } trs[i].onmouseout = function(){ this.style.backgroundColor ="#fff"; } } } 2.大神同学的代码: window.onload = function(){ var tr=document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); } function bgcChange(obj) { obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout=function(){ obj.style.backgroundColor="#fff"; } } 前两种都能运行成功,有效果。 3.我的代码: window.onload = function(){ hightLight(); } function hightLight(){ var tr=document.getElementsByTagName("tr"); for(i=0;i<tr.length;i++){ tr[i].onmouseover=function(){ tr[i].style.backgroundColor="red"; } tr[i].onmouseout=function(){ tr[i].style.backgroundColor="#fff"; } } } 运行报错,说style是undefined。
不难对比得出,主要是tr[i].onmouseover=function(){ }这个函数中有所不同。1网站给的代码是用了this,暂且不论,2大神给的代码是传递了tr[i]进来颜色改变的函数,只不过换了个名字叫obj,但是感觉实质和我的代码一样的呀,为什么我的就运行不成功呢??
window.onload = function(){
var tr=document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
tr[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
tr[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
这样就可以了
for循环的数组下角标从零开始,最后一位是tr[i].length-1,tr[i].length是不存在的,所以会提示未定义
JavaScript进阶篇
468060 学习 · 21891 问题
相似问题