关于提取元素时没有显示出效果

代码如下，问题在尾部：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1{
width:100px;
height:100px;
background:#F00;
}
</style>
<script type="text/jscript">function toGreen() 
{
var oDiv1=document.getElementById('div1');
 oDiv1.style.width='200px';
 oDiv1.style.height='200px';
 oDiv1.style.background='green';
}
function toRed()
{
var oDiv1=document.getElementById('div1');
oDiv1.style.width='100px';
oDiv1.style.height='100px';
oDiv1.style.background='red';
}
window.onload=function ()
{
var oDiv=document.getElementById('dvi1');
oDiv1.onmouseover="toGreen";
oDiv.onmouseout="toRed";
};
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="div1" >
</div>
</body>
</html>
问题：如果不使用window.onload function()直接写成<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">，能出现效果，可不知道为什么我写成window.onload function()无法成功。我在里面加了个aler()后，能弹出。证明window.onload function()是在运行。估计问题就在
        var oDiv=document.getElementById('dvi1');
oDiv1.onmouseover="toGreen";
oDiv.onmouseout="toRed";
这三行里。我实在不知道哪出问题了。