my code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{
border:1px solid #CCC;
margin:5px;
padding:5px;
}
</style>
<script type="text/javascript">
window.onload = changeColor;
function changeColor() {
for(var i =0; i < document.getElementById("main").getElementsByTagName("p").length; i++) {
var obj = document.getElementById("main").getElementsByTagName("p")[i];
if (window.addEventListener) {
obj.addEventListener('mousemove', function () {
this.style.backgroundColor ="#EEE";
}, false);
obj.addEventListener('mouseout', function () {
this.style.backgroundColor ="#FFF";
}, false);
} else if (window.attachEvent) {
//for ie
obj.attachEvent('onmousemove', function () {
this.style.backgroundColor ="#EEE";
});
obj.attachEvent('onmouseout', function () {
this.style.backgroundColor ="#FFF";
});
}
}
}
</script>
</head>
<body>
<div>
<p>1</p>
<div id="main">
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
</div>
</div>
</body>
</html>
it work well in Chrome、FireFox and ie9,but can't work in IE7/8
the error message is:Unable to set the property value of the "backgroundColor": the object is null or undefined
what's rong with me?