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

}

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

nginx实现动态分离,解决css和js等图片加载问题
nginx实现动态分离,解决css和js等图片加载问题参考文章: (1)nginx实现动态分离,解决css和js等图片加载问题 (2)https://www.cnblogs.com/sz-jack/ ...
Asp.Net头部动态加载css和js文件的方法
首先head标签上添加runat="server". protected void Page_Load(object sender, EventArgs e) {HtmlGener ...
获取js里添加的css文件,用JS添加一个css文件
我在这里发现了一些关于我的问题的问题,但我无法使用它. 通过JS点击它们时我会改变的CSS属性,JQuery的用JS添加一个css文件 Green Red /*$(document).ready(fu ...
vue给html动态添加属性,Vue中怎么动态添加类名？
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...
js html引入外部css文件,js中如何引入css文件？
js中如何引入css文件?下面本篇文章给大家介绍一下使用JS引入css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用document.write方式输出引入cs ...
css dhtml动态网页教程,CSS/JSS DHTML动态网页制作
第0章本书导读 0.1 本书适合的读者群 0.2 动态超文本标记语言(Dynamic HTML)的概念 0.3 DTHML的特点 0.4 CSS和DHTML 0.5 JavaScript和DHTML ...
android 动态添加删除控件,求教Android，动态添加到控件能动态删除吗？
protected View createView() {//动态添加组件 Button btn = new Button(this);//动态创建按钮 btn.setId(index++); btn ...
jquery 动态添加一行数据，支持动态删除
2019独角兽企业重金招聘Python工程师标准>>> 简介: 1.隐藏一个模板: 2.使用clone方法: 3.修改clone后的代码: 详细过程: 1.html代码 <tr ...
移除动态view android,请教Android,动态添加到控件能动态删除吗?
可以的.有2中方式: 1.动态添加的时候为组件设置id,删除的时候根据id查找到对应组件,然后删除 2.根据父节点,获取所有父组件下的子组件,然后依次删除. 示例: protected View cr ...
如何使用js将html、css、js代码格式化并高亮显示
代码格式化,高亮显示,这在我们开发过程中都是司空见惯的功能,各种编辑器都有,在好多网站上也可以在线格式化代码,但是如何在我们的前端页面上插入一段格式化后高亮显示的代码呢?有些小伙伴可能还不会,那么看完 ...

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

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

最新文章

热门文章