這篇文章主要介紹了javascript操作ul中li的方法,可實現鼠標經過li標簽項對應改變背景色的功能,涉及javascript鼠標事件及頁面元素屬性的相關操作技巧,需要的朋友可以參考下
本文實例講述了javascript操作ul中li的方法。分享給大家供大家參考。具體如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>動態控制li球隊列表</title>
- <script type="text/javascript">
- function iniEvent() {
- var ul = document.getElementById("football");
- var lis = ul.getElementsByTagName("li");
- for (var i = 0; i < lis.length; i++) {
- //鼠標經過事件
- lis[i].onmouseover = function () {
- var ul = document.getElementById("football");
- var lis = ul.getElementsByTagName("li");
- for (var i = 0; i < lis.length; i++) {
- var li = lis[i];
- if (li == this) {
- li.style.background = "red";
- }
- else {
- li.style.background = "gray";
- }
- }
- }
- //鼠標單擊事件
- lis[i].onclick = function () {
- var ul = document.getElementById("football");
- var lis = ul.getElementsByTagName("li");
- for (var i = 0; i < lis.length; i++) {
- var li = lis[i];
- if (li == this) {
- li.style.fontSize = 30;
- }
- else {
- li.style.fontSize = 16;
- }
- }
- }
- }
- }
- </script>
- </head>
- <body onload="iniEvent()">
- <!--功能說明
- 1.鼠標滑過的行變為紅色
- 2.點擊行字體變大
- -->
- <ul style="width:200px" id="football">
- <li>皇馬</li>
- <li>曼聯</li>
- <li>切爾西</li>
- <li>巴薩</li>
- <li>Ac米蘭</li>
- <li>國際米蘭</li>
- </ul>
- </body>
- </html>
希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
