第31天:动态生成节点-京东轮播图创建

简介: 一、获取节点属性getAttribute()通过这个方法可以得到某些元素的某些属性alert(demo.getAttribute("class"));二、设置节点属性setAttribute("属性","值");div.


一、获取节点属性
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>

运行结果:

 

相关文章
|
数据可视化 物联网 Python
GNU Radio简介及流程图搭建
GNU Radio简介及流程图搭建
552 0
|
6月前
|
存储 SQL 关系型数据库
MySQL 中的回表是什么?
在 MySQL 中,“回表”是指通过二级索引查询时,因二级索引仅存储索引字段值和主键值,需再根据主键到聚簇索引查找完整行数据的过程。此操作涉及两次索引查找,可能增加 IO 消耗,影响性能。优化方法包括使用覆盖索引或联合索引,避免回表,提升查询效率。合理设计索引对高并发、大数据量场景下的数据库性能至关重要。
339 17
|
机器学习/深度学习 算法 PyTorch
使用Pytorch中从头实现去噪扩散概率模型(DDPM)
在本文中,我们将构建基础的无条件扩散模型,即去噪扩散概率模型(DDPM)。从探究算法的直观工作原理开始,然后在PyTorch中从头构建它。本文主要关注算法背后的思想和具体实现细节。
9081 3
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
575 1
|
中间件 FESCAR Apache
你好!Apache Seata(incubating)
你好!Apache Seata(incubating)
1181 101
|
Rust 安全 程序员
揭秘Rust语言的内存安全秘籍:如何构建坚不可摧的系统级应用?
【8月更文挑战第31天】Rust语言凭借其独特内存安全机制在编程领域脱颖而出,通过所有权、借用与生命周期等概念,在保证高性能的同时避免了缓冲区溢出等常见错误。本文深入探讨Rust的内存安全机制,并通过示例代码展示如何利用这些机制构建高效且可靠的系统。尽管这些机制增加了学习难度,但为软件开发奠定了坚实基础,使Rust成为系统、嵌入式及网络编程的理想选择。随着社区的发展,Rust将在未来软件开发中扮演更重要角色。
352 0
|
存储 安全 Android开发
mov和mp4区别(内含转换方式)
mov和mp4区别(内含转换方式)
mov和mp4区别(内含转换方式)
|
数据中心 网络架构
交换机堆叠是什么?
【4月更文挑战第12天】
701 2
交换机堆叠是什么?
|
存储 SQL NoSQL
数据库的介绍、分类、作用和特点
数据库的介绍、分类、作用和特点
637 1
|
数据安全/隐私保护 网络架构
telnet实验操作 wireshark抓包实验操作
telnet实验操作 wireshark抓包实验操作