表格鼠标悬停变色。代码: var tr=document.getElementsByTagName('tr'); for (var i = 0; i < tr.length; i++) { tr[i].onmouseover=function(){
tr[i].style.backgroundColor="#f2f2f2";
} tr[i].onmouseleave=function(){ tr[i].style.backgroundColor="#fff";
}
}chrome说的是 Uncaught TypeError: Cannot read property 'style' of undefined at HTMLTableRowElement.tr.(anonymous function).onmouseover但是把tr[i]改为this就可以: var tr=document.getElementsByTagName('tr'); for (var i = 0; i < tr.length; i++) {
tr[i].onmouseover=function(){ this.style.backgroundColor="#f2f2f2";
}
tr[i].onmouseleave=function(){ this.style.backgroundColor="#fff";
}
}
1 回答

杨__羊羊
TA贡献1943条经验 获得超7个赞
让我们先来假设页面上有5个tr,这样子比较好说明:
var tr=document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
tr[i].onmouseover = function on_tr_over() {
tr[i].style.backgroundColor="#f2f2f2";
};
}
// 因为你页面上的鼠标事件触发是在for循环之后的
// 这时候i的赋值是tr.length,也就是i是5
// 这5个tr分别是tr[0]到tr[4],tr[5]是代表第6个tr元素了
// 而实际上页面上没有第6个tr,所以就是undefined了
// 当鼠标移到tr时,相当于执行下面的语句:
tr[5].style.backgroundColor="#f2f2f2"; // 调了undefined的style属性,所以报错了哦
而第二段代码传this的话,就是指向事件被触发的目标元素,这个是浏览器传给你了,所以一定正确
哈哈,这是形象的理解,希望对你有帮助。
添加回答
举报
0/150
提交
取消