js中实现对动态内容的css样式修饰

比眉伴天荒 2022-04-01 15:21 201阅读 0赞

下面的代码可以实现将css样式修饰的内容动态显示，

先获取变量，然后

**一：用createElement()函数创建相应的元素标签，**

如创建一个div：var div1=document.createElement("div");//创建div

**二：设置其css样式：**

div1.setAttribute("class","blogs");  
setAttribute（）可以设置其属性，第一个参数为属性名称，第二个参数为属性的值。

**三：将内容嵌入某个标签：**

h3.innerHTML="<a title=\\""+title+"\\" href="+"\\"javascript:to('"+title+"')\\" target=\\"\_blank\\">"+title+"</a>";  
在h3中嵌入了一个超链接

**四：将某个标签嵌入其余的标签中：**

var ul=document.createElement("ul");//创建ul  
 div1.append(ul);  
在div中嵌入ul

效果类似：

<div>

<ul>

</ul>

</div>

完整代码：

for (var i=0;i<number;i++)
                { 
    
                  //var content=xmlDoc.getElementsByTagName("content")[i].childNodes[0].nodeValue;
                  var times=xmlDoc.getElementsByTagName("time")[i].childNodes[0].nodeValue;
                  var title=xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
                  var abstract=xmlDoc.getElementsByTagName("abstract")[i].childNodes[0].nodeValue;
                  var lookNum=xmlDoc.getElementsByTagName("lookNum")[i].childNodes[0].nodeValue;
                  var commentNum=xmlDoc.getElementsByTagName("commentNum")[i].childNodes[0].nodeValue;
                  var appreciationNum=xmlDoc.getElementsByTagName("appreciationNum")[i].childNodes[0].nodeValue;
    
                  
                  var div1=document.createElement("div");//创建div
                  div1.setAttribute("class","blogs");
                  var ul=document.createElement("ul");//创建ul
                  var h3=document.createElement("h3");//创建h3
                  var p=document.createElement("p");//创建h3
                  h3.innerHTML="<a title=\""+title+"\" href="+"\"javascript:to('"+title+"')\" target=\"_blank\">"+title+"</a>";
                  p.innerHTML=abstract+"<a style=\"color: #759b08;padding-left:5px;\" href=\"javascript:to('"+title+"')\"  target=\"_blank\">[详情]</a>";
                  var div2=document.createElement("div");//创建div
                  div2.setAttribute("class","author");
                  div2.innerHTML="<p>"+times+"       &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp"+" 浏览数("+lookNum+")  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp"+" 评论数("+commentNum+")&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp   &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp  &nbsp&nbsp <button type=\"button\" onclick=\"edit1(this)\"style=\"background: transparent; opacity:0.5  ; background:rgba(255, 251, 240, 0);border-width:0px; \"margin-left:5px;  >编辑</button><button type=\"button\" onclick=\"delete2(this)\"style=\"background: transparent; opacity:0.5  ; background:rgba(255, 251, 240, 0);border-width:0px; \"margin-left:5px;  >删除</button></p>";
                  //var times=time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
                //li.innerHTML=temp+"\<br>\<br>\<font style=\"size: 2px;color: #999\">"+times+"\</font>";
                ul.append(h3);
                ul.append(p); 
                ul.append(div2);
                div1.append(ul);
                m.append(div1);
              }

**显示效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQ3NTQ0_size_16_color_FFFFFF_t_70][]

其中的内容和时间均为从数据库里取出的内容。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQ3NTQ0_size_16_color_FFFFFF_t_70]: /images/20220401/d27fe3a8a8484223b2198836993ad2b5.png