这是一个点击“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>

解决方案 »

  1.   

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

  2.   

    补充一下,在HTML 4.01规范里,支持name属性的元素有:
    A, APPLET, BUTTON, FORM, FRAME, IFRAME, IMG, INPUT, OBJECT, MAP, META, PARAM, TEXTAREA, SELECT所以说,IE7其实是符合规范的,你可以改为用getElementsByTagName获取指定标签的元素再用name或class属性过滤的方法
      

  3.   

    也就是说要把<div  name="bgc" class="c1">
    的div换成a?