点击空缺地方DIV消失为什么IE下没有效果-JavaSript-爱易网页

点击空缺地方DIV消失为什么IE下没有效果

日期：2014-05-16　浏览次数：20361 次

点击空白地方DIV消失为什么IE下没有效果



<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

 .div{

	 width:200px;

	 height:200px;

	 background:#CCC;

	 }

</style>

</head>



<body>

<div class="div" name="sy_xiand" style="display:block;"></div>

</body>

<script type="text/javascript">

var xdivs=document.getElementsByName('sy_xiand')

document.onclick=function()

{

    for(var i=0;i<xdivs.length;i++)  xdivs[i].style.display='none';

}

</script>

</html>

------解决方案--------------------

引用:

Quote: 引用:

<div class="div" id="sy_xiand" style="display:block;"></div>
将 name改成id

如果换成id 怎么才能实现点击空白的地方多个div消失呢

要操作多个div，可以改用class
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div{
width:200px;
height:200px;
background:#CCC;
}
</style>
</head>

<body>
<div class="div sy_xiand" style="display:block;"></div>
</body>
<script type="text/javascript">
var xdivs=document.querySelectorAll(".sy_xiand");
document.onclick=function()
{
for(var i=0;i<xdivs.length;i++) xdivs[i].style.display='none';
}
</script>
</html>