javascript操作ul中l(wèi)i的方法
更新時間:2015年05月14日 09:47:52 作者:永遠(yuǎn)愛好寫程序
這篇文章主要介紹了javascript操作ul中l(wèi)i的方法,可實(shí)現(xiàn)鼠標(biāo)經(jīng)過li標(biāo)簽項(xiàng)對應(yīng)改變背景色的功能,涉及javascript鼠標(biāo)事件及頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了javascript操作ul中l(wèi)i的方法。分享給大家供大家參考。具體如下:
<!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>動態(tài)控制li球隊(duì)列表</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++) { //鼠標(biāo)經(jīng)過事件 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"; } } } //鼠標(biāo)單擊事件 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.鼠標(biāo)滑過的行變?yōu)榧t色 2.點(diǎn)擊行字體變大 --> <ul style="width:200px" id="football"> <li>皇馬</li> <li>曼聯(lián)</li> <li>切爾西</li> <li>巴薩</li> <li>Ac米蘭</li> <li>國際米蘭</li> </ul> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
javascript 最常用的10個自定義函數(shù)[推薦]
如果不使用類庫或者沒有自己的類庫,儲備一些常用函數(shù)總是有好處的。2009-12-12JavaScript中函數(shù)的四種調(diào)用方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中函數(shù)的四種調(diào)用方式,文中的示例代碼講解詳細(xì),對我們深入掌握J(rèn)avaScript有一定的幫助,需要的可以參考下2023-10-10基于jquery ajax的多文件上傳進(jìn)度條過程解析
這篇文章主要介紹了基于jquery ajax的多文件上傳進(jìn)度條過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07詳解JavaScript數(shù)組reduce()方法的高級技巧
reduce()?是?JavaScript?中一個很有用的數(shù)組方法,這篇文章主要介紹了JavaScript中reduce()方法的高級技巧,感興趣的小伙伴可以了解一下2023-03-03JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時長和第一幀畫面過程講解
當(dāng)我們做一個后臺系統(tǒng)的音視頻管理模塊時,通常要限制文件的大小和類型,這篇文章主要介紹了JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時長和第一幀畫面過程,需要詳細(xì)了解實(shí)現(xiàn)方法可以參考下文2023-05-05