我想直接在tr上绑定onmouseover和onmouseout事件
<tr onmouseover="mouse(this)">
然后
function mouse(obj){
obj.style.backgroundColor ="#f2f2f2";
}
window.onload = function(){
mouse();
}
做了这些改动之后
会报错
Uncaught TypeError: Cannot read property 'style' of undefined
哪位大神给解答一下。
你的mouse方法调用的时候需要参数啊,
要解决这个问题,首先要了解window.onload到底是什么?
window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:
一.将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。
二.通过window.onload来执行脚本代码。
第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个良好的选择。window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。
----------------------------------来自http://www.softwhy.com/forum.php?mod=viewthread&tid=6191
因为是顺序加载的,所以有些对象未加载完程序就不能执行,所以才使用window.onload,但是在这题在调用事件onmouseover时tr已经加载,所以不需要用到window.onload。删掉就可以解决。
还有一种就是如果你是要一开始初始化背景的话,那么请把
window.onload = function(){
mouse(); //改为mouse(document.getElementById("tr")) <-这里为了方便给tr加了id“tr”
}
因为你要调用函数要注意,这个函数需不需要给他实际参数,如果不给的话就会出错,比如Uncaught TypeError: Cannot read property 'style' of undefined 这个,因为没有对象,所以它的style自然是undefined
实现出来:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
function mouse(obj){
obj.style.backgroundColor ="red";
}
window.onload = function(){
mouse(document.getElementById("tr"));
}
</script>
</head>
<body >
<table>
<tr id="tr" onmouseover="mouse(this)">
<th>dadadsdasdd</th>
<tr>
</table>
</body>
</html>
window.onload = function(){mouse();} 会在页面加载之后执行mouse()方法,你没有传递任何参数
function mouse(obj){obj.style.backgroundColor ="#f2f2f2";}这个方法接受一个参数,改变参数对象的style背景样式,而你没有传入这个参数,那么方法里默认obj为undefined; 就跟你var声明了一个参数,却没有初始化一样。找不到对象,不知道操作谁去,自然报错