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:1pxsolid#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:3px3px;
}
#hrs{
clear:both;
}
.zhezhao{
background-color:#0000CC;
width:100%;
height:100%;
position:absolute;
opacity:0.1;
}
.zhezhao:hover{
opacity:0.5;
}
动态添加元素的js部分:
function$(id){
returndocument.getElementById(id);
}
window.οnlοad=function(){
varobjarr=[];
//动态添加初始化
inints();
functioninints(){
$("img_list").innerHTML=sethtml();
//以下貌似不独立设置,应用静态css大部分也可以啊?
//setstyle();
}
functionsethtml(){
varss="";
varstr="";
for(vari=0;i<3;i++){
varinfo=newObject
varid="zhezhao-"+(i+1);
if(i==0){
ss="
示例"+(i+1)
}else{
ss="";
}
str+="
第"
+(i+1)+"VIP
"+ss+""
}
console.log(str);
returnstr;
}
functionsetstyle(){
varaa=document.getElementsByName("zz")
for(vari=0;i
aa[i].style.cssText="background-color:#0000CC;width:100%;height:100%;position:absolute;opacity:0.1;"
}
}
}