javascript操作ul中l(wèi)i的方法
本文實(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>動(dòng)態(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)過(guò)事件 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()"> <!--功能說(shuō)明 1.鼠標(biāo)滑過(guò)的行變?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>國(guó)際米蘭</li> </ul> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript 最常用的10個(gè)自定義函數(shù)[推薦]
如果不使用類(lèi)庫(kù)或者沒(méi)有自己的類(lèi)庫(kù),儲(chǔ)備一些常用函數(shù)總是有好處的。2009-12-12JavaScript中函數(shù)的四種調(diào)用方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中函數(shù)的四種調(diào)用方式,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握J(rèn)avaScript有一定的幫助,需要的可以參考下2023-10-10基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析
這篇文章主要介紹了基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07詳解JavaScript數(shù)組reduce()方法的高級(jí)技巧
reduce()?是?JavaScript?中一個(gè)很有用的數(shù)組方法,這篇文章主要介紹了JavaScript中reduce()方法的高級(jí)技巧,感興趣的小伙伴可以了解一下2023-03-03JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫(huà)面過(guò)程講解
當(dāng)我們做一個(gè)后臺(tái)系統(tǒng)的音視頻管理模塊時(shí),通常要限制文件的大小和類(lèi)型,這篇文章主要介紹了JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫(huà)面過(guò)程,需要詳細(xì)了解實(shí)現(xiàn)方法可以參考下文2023-05-05JS從數(shù)組中隨機(jī)獲取一個(gè)值的常用寫(xiě)法
這篇文章主要介紹了JS從數(shù)組中隨機(jī)獲取一個(gè)值的常用寫(xiě)法,需要的朋友可以參考下2023-07-07地址欄上的一段語(yǔ)句,改變頁(yè)面的風(fēng)格。(教程)
地址欄中的js改變頁(yè)面的風(fēng)格代碼2008-04-04微信小程序?qū)崿F(xiàn)頁(yè)面左右滑動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁(yè)面左右滑動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11