JS动态添加元素和设置其样式问题

Question

html代码中id="img_list" 是需要动态添加的容器，id="append"里面是静态元素，动态元素和静态元素通用css样式。其问题主要出在动态的所有 class="zhezhao"的节点样式（鼠标滑过时透明度变化）。

问题1：如何让动态元素 class="zhezhao"部分显示正确的样式？

问题2：静态css样式大部分在动态元素上显示正常，但这样应用是否合理？就是说静态元素应用静态样式，动态元素应用动态样式为合理？

html代码如下：

<div id="img_list">
</div>
<div id="hrs"><hr/></div>
<div id="append">
    <div id="cont">
        <div id="div1">
            <img src="img/5vip.jpg"/>
            <div>第一VIP</div>
        </div>
        <div id="text">示例1</div>
        <div id="zhezhao" class="zhezhao"></div>
      </div>
    <div id="cont">
        <div id="div1">
              <img src="img/5vip.jpg"/>
              <div>第一VIP</div>
        </div>
        <div id="zhezhao" class="zhezhao"></div>
    </div>
</div>

css部分：

img{
    width: 250px;
    height: 150px;
}
#cont{
    background-color: #A9A9A9;
    text-align: center;
    overflow: hidden;
    float: left;
    margin: 3px;
    position: relative;
}
#div1{
    border: 1px solid #FF0000;
    float: left;
    background-color: #FAEBD7;
}
#text{
    width: 110px;
    position: absolute;
    background-color: #FFA500;
    transform: rotate(-45deg) translate(-30px,-5px);
    -webkit-transform: rotate(-45deg) translate(-30px,-5px);
    font-size: 16px;
    padding: 3px 3px;
}
#hrs{
    clear: both;
}
.zhezhao{
    background-color: #0000CC;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.1;
}
.zhezhao:hover{
    opacity:0.5;
}

动态添加元素的js部分：

function $(id){
    return document.getElementById(id);
}
window.onload=function(){
    var objarr=[];
    //动态添加初始化
    inints();
    function inints(){
        $("img_list").innerHTML=sethtml(); 
        //以下貌似不独立设置，应用静态css大部分也可以啊？
        //setstyle();
    }
    function sethtml(){
        var ss="";
        var str="";
        for (var i=0;i<3;i++) {
            var info=new Object
            var id="zhezhao-"+(i+1); 
            if(i==0){
                ss="<div id='text'>示例"+(i+1)
            }else{
                ss="";
            } 
            str+="<div id='cont'><div id='div1'><img src='img/5vip.jpg'/><div>第"
            +(i+1)+"VIP</div></div>"+ss+"</div><div id='"+id+"' class='zhezhao' name='zz'></div></div>" 
        }
        console.log(str); 
        return str;
    }
    function setstyle(){
        var aa=document.getElementsByName("zz")
        for(var i=0;i<aa.length;i++){
            aa[i].style.cssText="background-color: #0000CC;width: 100%;height: 100%;position: absolute;opacity: 0.1;"
        }
    }
}

Answer 1

div闭合问题 使得.zhezhao的div父容器是body，100%就是满屏了应该尽量不在js里写样式，通过css中伪类或者js修改元素的class来完成样式的修改