一段js代码在ie下总报错，在chrome,opera,ff下皆无有关问题，请问下大家
日期：2014-05-16 浏览次数：20417 次
一段js代码在ie下总报错，在chrome,opera,ff下皆无问题，请教下大家
这是简化后能体现问题的代码
<!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>
<title></title>
<script type="text/javascript">
var picArr = ["../Img/timer/0.jpg","../Img/timer/1.jpg","../Img/timer/2.jpg",
"../Img/timer/3.jpg","../Img/timer/4.jpg"];
function initEvent() {
var arr = document.getElementsByTagName("img");
for (var i = 0; i < arr.length; i++ ) {
arr[i].onmouseover = popPic;
arr[i].onmouseout = closePic;
arr[i].setAttribute("imgPath", picArr[i]);
}
}
function popPic() {
var div1 = document.createElement("div");
div1.id = "div1";
div1.style.position = "absolute";
div1.style.top = window.event.clientY + "px";
div1.style.left = window.event.clientX + "px";
div1.innerHTML = setdivContent(this);
document.body.appendChild(div1);
}
function setdivContent(image) {
var contentImg = "<img style='margin-left:2px;margin-right:2px;margin-top:2px;margin-bottom:50px;width:260px;height:370px;' src='" + image.getAttribute("imgPath") + "'></img>";
return contentImg;
}
function closePic() {
var div1 = document.getElementById("div1");
document.body.removeChild(div1);
}
</script>
</head>
<body onload="initEvent()">
<table cellspacing="5">
<tr>
<td><img src="../Img/timer/100.png" /></td>
<td><img src="../Img/timer/101.png" /></td>
<td><img src="../Img/timer/102.png" /></td>
<td><img src="../Img/timer/103.png" /></td>
<td><img src="../Img/timer/104.png" /></td>
</tr>
</table>
</body>
</html>
使用ie开发者工具调试，会发现鼠标在缩略图上乱舞动时
function closePic() {
var div1 = document.getElementById("div1");
document.body.removeChild(div1);
}
div1经常会经常为null,所以document.body.removeChild(div1);就会报参数错误
而使用firefox,opera,chrome开发者工具的控制台里都不会报这个错
大家可以直接运行代码，就是对应图片路径修改下，在适当目录存入图片就好
请教大家下是什么原因，谢谢啦^_^
------解决方案--------------------
先document.body.appendChild(div1);
后设置参数
这是简化后能体现问题的代码
<!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>
<title></title>
<script type="text/javascript">
var picArr = ["../Img/timer/0.jpg","../Img/timer/1.jpg","../Img/timer/2.jpg",
"../Img/timer/3.jpg","../Img/timer/4.jpg"];
function initEvent() {
var arr = document.getElementsByTagName("img");
for (var i = 0; i < arr.length; i++ ) {
arr[i].onmouseover = popPic;
arr[i].onmouseout = closePic;
arr[i].setAttribute("imgPath", picArr[i]);
}
}
function popPic() {
var div1 = document.createElement("div");
div1.id = "div1";
div1.style.position = "absolute";
div1.style.top = window.event.clientY + "px";
div1.style.left = window.event.clientX + "px";
div1.innerHTML = setdivContent(this);
document.body.appendChild(div1);
}
function setdivContent(image) {
var contentImg = "<img style='margin-left:2px;margin-right:2px;margin-top:2px;margin-bottom:50px;width:260px;height:370px;' src='" + image.getAttribute("imgPath") + "'></img>";
return contentImg;
}
function closePic() {
var div1 = document.getElementById("div1");
document.body.removeChild(div1);
}
</script>
</head>
<body onload="initEvent()">
<table cellspacing="5">
<tr>
<td><img src="../Img/timer/100.png" /></td>
<td><img src="../Img/timer/101.png" /></td>
<td><img src="../Img/timer/102.png" /></td>
<td><img src="../Img/timer/103.png" /></td>
<td><img src="../Img/timer/104.png" /></td>
</tr>
</table>
</body>
</html>
使用ie开发者工具调试，会发现鼠标在缩略图上乱舞动时
function closePic() {
var div1 = document.getElementById("div1");
document.body.removeChild(div1);
}
div1经常会经常为null,所以document.body.removeChild(div1);就会报参数错误
而使用firefox,opera,chrome开发者工具的控制台里都不会报这个错
大家可以直接运行代码，就是对应图片路径修改下，在适当目录存入图片就好
请教大家下是什么原因，谢谢啦^_^
------解决方案--------------------
先document.body.appendChild(div1);
后设置参数
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
