onclick事件——更改li标签背景图片

106 阅读 0 评论 70 点赞

我是靠谱客的博主安静身影，这篇文章主要介绍onclick事件——更改li标签背景图片，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 1 <html>
 2
<head>
 3
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4
<title>无标题</title>
 5
<style type="text/css">
 6 
ul li{
 7 
background: grey;
 8 
margin-bottom: 1px;
 9 
list-style: none;
10
}
11
</style>
12
<script type="text/javascript">
13
function change(obj){
14
var arr = document.getElementById("ul").getElementsByTagName("li");
15
for (var i = 0; i < arr.length; i++) {
16
var a = arr[i];
17 
a.style.background = "grey";
18 
};
19 
obj.style.background = "red";
20 
}
21
</script>
22
</head>
23
<body>
24
<ul id="ul">
25
<li onclick="change(this);">1</li>
26
<li onclick="change(this);">1</li>
27
<li onclick="change(this);">1</li>
28
<li onclick="change(this);">1</li>
29
<li onclick="change(this);">1</li>
30
<li onclick="change(this);">1</li>
31
<li onclick="change(this);">1</li>
32
<li onclick="change(this);">1</li>
33
</ul>
34
</body>
35 </html>