javascript操作ul中li的方法
本文实例讲述了javascript操作ul中li的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态控制li球队列表</title>
<scripttype="text/javascript">
functioniniEvent(){
varul=document.getElementById("football");
varlis=ul.getElementsByTagName("li");
for(vari=0;i<lis.length;i++){
//鼠标经过事件
lis[i].onmouseover=function(){
varul=document.getElementById("football");
varlis=ul.getElementsByTagName("li");
for(vari=0;i<lis.length;i++){
varli=lis[i];
if(li==this){
li.style.background="red";
}
else{
li.style.background="gray";
}
}
}
//鼠标单击事件
lis[i].onclick=function(){
varul=document.getElementById("football");
varlis=ul.getElementsByTagName("li");
for(vari=0;i<lis.length;i++){
varli=lis[i];
if(li==this){
li.style.fontSize=30;
}
else{
li.style.fontSize=16;
}
}
}
}
}
</script>
</head>
<bodyonload="iniEvent()">
<!--功能说明
1.鼠标滑过的行变为红色
2.点击行字体变大
-->
<ulstyle="width:200px"id="football">
<li>皇马</li>
<li>曼联</li>
<li>切尔西</li>
<li>巴萨</li>
<li>Ac米兰</li>
<li>国际米兰</li>
</ul>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。