日期:2014-05-16  浏览次数:20412 次

急求答案!这段代码为何在IE7下不起作用?
这是一个点击“red”或“blue”会改变下面背景颜色的代码
我想问,为啥在IE7下面不起效果??
如何才能在IE7底下运行实现该效果?

<!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">
  .red{
    background-color:#e71401;
  }
  .blue{
    background-color:#1ca1d9;
  }
  .c11{
  width:100px;
  height:100px;
    background-color:purple;
  }
  .c1{
  width:100px;
  height:100px;
  }
  .c21{
  width:100px;
  height:100px;
    background-color:yellow;
  }
  .c2{
  width:100px;
  height:100px;
  }
  .c31{
  width:100px;
  height:100px;
    background-color:green;
  }
  .c3{
  width:100px;
  height:100px;
  }
</style>

<script language="javascript" type="text/javascript">
   var theColors = new Array();
function changeColors(name){
   theColors = document.getElementsByName("bgc");
   for (var i=0;i<theColors.length;i++)
   {
 x = theColors[i].className;
     if(x.substring(0,2)=="c1") {alert("c1 "+ name);theColors[i].className = "c1 " + name; }
     if(x.substring(0,2)=="c2") theColors[i].className = "c2 " + name;
     if(x.substring(0,2)=="c3") theColors[i].className = "c3 " + name;
   }
}
</script>
</head>

<body>

<div style="width:50px; height:50px;" onclick="changeColors('red');">red</div>
<div style="width:50px; height:50px;" onclick="changeColors('blue');">blue</div>

<div class="c11">
<div  name="bgc" class="c1">
111
</div>
</div>

<div class="c21">
<div  name="bgc" class="c2">
222
</div>
</div>

<div class="c31">
<div  name="bgc" class="c3">
333
</div>
</div>

</body>
</html>


------解决方案--------------------
只有form、frame、iframe、a以及input、select、textarea等表单输入元素才支持name属性