javascript操作ul中li的方法

这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下

本文实例讲述了javascript操作ul中li的方法。分享给大家供大家参考。具体如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>动态控制li球队列表</title> 
7. <script type="text/javascript"> 
8. function iniEvent() { 
9. var ul = document.getElementById("football"); 
10. var lis = ul.getElementsByTagName("li"); 
11. for (var i = 0; i < lis.length; i++) { 
12. //鼠标经过事件 
13. lis[i].onmouseover = function () { 
14. var ul = document.getElementById("football"); 
15. var lis = ul.getElementsByTagName("li"); 
16. for (var i = 0; i < lis.length; i++) { 
17. var li = lis[i]; 
18. if (li == this) { 
19. li.style.background = "red"; 
20. } 
21. else { 
22. li.style.background = "gray"; 
23. } 
24. } 
25. } 
26. //鼠标单击事件 
27. lis[i].onclick = function () { 
28. var ul = document.getElementById("football"); 
29. var lis = ul.getElementsByTagName("li"); 
30. for (var i = 0; i < lis.length; i++) { 
31. var li = lis[i]; 
32. if (li == this) { 
33. li.style.fontSize = 30; 
34. } 
35. else { 
36. li.style.fontSize = 16; 
37. } 
38. } 
39. } 
40. } 
41. } 
42. </script> 
43. </head> 
44. <body onload="iniEvent()"> 
45. <!--功能说明 
46. 1.鼠标滑过的行变为红色 
47. 2.点击行字体变大 
48. --> 
49. <ul style="width:200px" id="football"> 
50. <li>皇马</li> 
51. <li>曼联</li> 
52. <li>切尔西</li> 
53. <li>巴萨</li> 
54. <li>Ac米兰</li> 
55. <li>国际米兰</li> 
56. </ul> 
57. </body> 
58. </html> 

希望本文所述对大家的javascript程序设计有所帮助。