请高手们指点一下,为什么我层的背景颜色显示不出来呢!

<!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{margin:100px;}
.t1{width:276px;
    height:261px;
background-color:#00FF66;
text-align:center;}
.t2{width:261px;
    height:276px;
background-image:url(a1.jpg);
background-color:#CC99CC;
text-align:center;}
</style><script>
function get()
{var arr=["01.jpg","02.jpg","03.jpg"];
var ofrag=document.createDocumentFragment();
for(var i=0;i<arr.length;i++)
{var odiv=document.createElement("div");
  var oimg=document.createElement("img");
  oimg.src=arr[i];
odiv.appendChild(oimg);
var att=document.createAttribute("class");
odiv.attributes.setNamedItem(att);
if(oimg.width>oimg.height)
{att.nodeValue="t1"}
if(oimg.width<oimg.height)
{att.nodeValue="t2"};
ofrag.appendChild(odiv);
}
document.body.appendChild(ofrag)
}
</script>
</head><body onload="get()">
</body>
</html>语法应该没有问题,没有报错,但是背景颜色就不出来,不知道为什么,请高手指点!!!!!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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{margin:100px;}
            .t1{width:276px;
                height:261px;
                background-color:#00FF66;
                text-align:center;}
            .t2{width:261px;
                height:276px;
                background-image:url(a1.jpg);
                background-color:#CC99CC;
                text-align:center;}
        </style>        <script>
            function get()
            {var arr=["01.jpg","02.jpg","03.jpg"];
                var ofrag=document.createDocumentFragment();
                for(var i=0;i <arr.length;i++)
                {var odiv=document.createElement("div");
                    var oimg=document.createElement("img");
                    oimg.src=arr[i];
                    odiv.appendChild(oimg);
                    var att=document.createAttribute("class");
                    odiv.attributes.setNamedItem(att);
//这里没有执行到
                    if(oimg.width>=oimg.height)
                    {att.nodeValue="t1"
                     }
                    if(oimg.width <=oimg.height)
                    {att.nodeValue="t2"};
                    ofrag.appendChild(odiv);
                }
//到这里
                document.body.appendChild(ofrag) ;

            }
        </script>
    </head>    <body onload="get()">
    </body>
</html>
oimg.width和oimg.height 都是0，所以没有把你的class=t1或者class=t2放入，当然不会有背景色
这样做<!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{margin:100px;}
            .t1{width:276px;
                height:261px;
                background-color:#00FF66;
                text-align:center;}
            .t2{width:261px;
                height:276px;
                background-image:url(a1.jpg);
                background-color:#CC99CC;
                text-align:center;}
        </style>        <script>
            function get()
            {var arr=["01.jpg","02.jpg","03.jpg"];
                var ofrag=document.createDocumentFragment();
                for(var i=0;i <arr.length;i++)
                {var odiv=document.createElement("div");
                    var oimg=document.createElement("img");
                    oimg.src=arr[i];
                    var imgdw=oimg.width;
                    var imgdh=oimg.height;
                    odiv.appendChild(oimg);


                    var att=document.createAttribute("class");
                    odiv.attributes.setNamedItem(att);

                    if(imgdw>imgdh)
                    {att.nodeValue="t1"
                     }
                    if(imgdw <=imgdh)
                    {att.nodeValue="t2"};
                    ofrag.appendChild(odiv);
                }                document.body.appendChild(ofrag) ;

            }
        </script>
    </head>    <body onload="get()">
    </body>
</html>
谢谢,BENZ的热心解答 ~~但是我还是有一点不明白的地方,希望你能教我下!
  var oimg=document.createElement("img");
                    oimg.src=arr[i];
                    var imgdw=oimg.width;
                    var imgdh=oimg.height;
                    alert(oimg.width)        //正确的图象宽度
                    odiv.appendChild(oimg);但是   var oimg=document.createElement("img");
                    oimg.src=arr[i];
                    odiv.appendChild(oimg);
                    var imgdw=oimg.width;
                    var imgdh=oimg.height;
                    alert(oimg.width)           //0
为什么会这样呢先写和后写有什么不同么~
但是  var oimg=document.createElement("img");
                    oimg.src=arr[i];
                    odiv.appendChild(oimg);
                    var imgdw=oimg.width;
                    var imgdh=oimg.height;
                    oimg.onload=function(){
                      alert(oimg.width)          //加载后才可以
                    }

为什么会这样呢先写和后写有什么不同么~
你可以理解为odiv.appendChild(oimg); 在这句话执行完以后，oimg就发生了改变
可以理解为浏览器对img 的width 和 height 属性支持不够好