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;"
}
}
}
1 回答
人笨嫌刀钝
TA贡献100条经验 获得超24个赞
div闭合问题 使得.zhezhao的div父容器是body，100%就是满屏了
应该尽量不在js里写样式，通过css中伪类或者js修改元素的class来完成样式的修改
添加回答
举报
0/150
提交
取消