1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > js动态添加HTML css失效 JS动态添加元素和设置其样式问题

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

时间:2020-07-14 02:21:59

相关推荐

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: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;"

}

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。