第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>

运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

19290
来自专栏积累沉淀

JavaScript DOM操作表格及样式

一.操作表格 <table>标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table...

251100
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb04-jQuery(Java真正的全栈开发)

? jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客...

37190
来自专栏互联网开发者交流社区

JS总结

16740
来自专栏Python

Django比较相等或者不相等的模板语法ifequal / ifnotequal

ifequal / ifnotequal      在模板语言里比较两个值并且在他们一致的时候显示一些内容,Django提供了 ifequal 和 ifnote...

33360
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

42390
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

12320
来自专栏HTML5学堂

querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自...

37970
来自专栏flutter开发者

Flutter动画【2】

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

1K40
来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

10330

扫码关注云+社区

领取腾讯云代金券