js动态添加HTML css失效,JS动态添加元素和设置其样式问题

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

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

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

html代码如下：

            

第一VIP

示例1

              

第一VIP

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.οnlοad=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="

示例"+(i+1)

}else{

ss="";

}

            str+="

第"

+(i+1)+"VIP

"+ss+"

"

}

console.log(str);

return str;

}

function setstyle(){

var aa=document.getElementsByName("zz")

for(var i=0;i

aa[i].style.cssText="background-color: #0000CC;width: 100%;height: 100%;position: absolute;opacity: 0.1;"

}

}

}