第31天：动态生成节点-京东轮播图创建
一、获取节点属性
getAttribute()通过这个方法可以得到某些元素的某些属性
alert(demo.getAttribute("class"));
二、设置节点属性
setAttribute("属性"，"值");
div.setAttribute("class","demo");
三、删除节点属性
removeAttribute("属性");
demo.removeAttribute("title");
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>京东轮播图创建</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 730px; 13 height: 454px; 14 margin: 100px auto; 15 overflow: hidden; 16 position: relative; 17 18 } 19 .circle{ 20 position: absolute; 21 left:50%; 22 margin-left: -50px; 23 bottom:10px; 24 } 25 .circle span{ 26 float: left; 27 width: 18px; 28 height: 18px; 29 border-radius: 50%; 30 background-color: pink; 31 text-align: center; 32 line-height: 18px; 33 margin-right: 10px; 34 cursor: pointer; 35 } 36 .circle span.current{ 37 background-color:blue ; 38 color: #fff; 39 } 40 </style> 41 <script> 42 window.onload=function(){ 43 var scroll=document.getElementById("scroll"); 44 var circle=document.createElement("div"); 45 circle.className="circle";//更改类名 46 scroll.appendChild(circle); 47 var ul=document.getElementById("ul"); 48 var lis=ul.children; 49 for(var i=0;i<lis.length;i++){ 50 var newspan=document.createElement("span"); 51 newspan.innerHTML=i+1; 52 circle.appendChild(newspan); 53 } 54 var child=circle.children; 55 child[0].setAttribute("class","current"); 56 57 58 59 } 60 </script> 61 </head> 62 <body> 63 <div class="box" id="scroll"> 64 <div class="slider"> 65 <ul id="ul"> 66 <li><img src="images/11.jpg" alt=""></li> 67 <li><img src="images/22.jpg" alt=""></li> 68 <li><img src="images/33.jpg" alt=""></li> 69 <li><img src="images/44.jpg" alt=""></li> 70 <li><img src="images/55.jpg" alt=""></li> 71 <li><img src="images/66.jpg" alt=""></li> 72 </ul> 73 </div> 74 <div class="circle"> 75 <span>1</span> 76 <span>2</span> 77 <span>3</span> 78 <span>4</span> 79 <span>5</span> 80 <span>6</span> 81 </div> 82 </div> 83 </body> 84 </html>
运行结果：
