"li隔行变色"代码

最新推荐文章于 2021-02-26 22:50:06 发布

JOHNCOOLS

最新推荐文章于 2021-02-26 22:50:06 发布

阅读量1.7k

点赞数

分类专栏： HTML JS 网页设计学习与技巧文章标签： generator html function

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章 0 订阅

订阅专栏

在经典论坛上一朋友问了这一问题,偶以前只试过表格隔行变色,li倒还真没有试过,不过感觉不难,于是就写了下面这段代码,实现了这个功能,自己收藏起来了.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
< style type ="text/css" >
.style1 { color : #f00 ; background : #eee }
.style2 { color : #00f ; background : #ccc }
</ style >
< script type ="text/javascript" >
     function chgListStyle(id){
         var objId = document.getElementById(id);
         if (objId){
             for ( var i = 0 ;objId.childNodes[i] != undefined;i ++ ){
                 if (i % 2 == 0 )
                    objId.childNodes[i].className = " style1 " ;
                 else
                    objId.childNodes[i].className = " style2 " ;
            }
        }
}
</ script >
</ HEAD >
< BODY >
< ul id ="a" >
< li > test </ li >
< li > test </ li >
< li > test </ li >
< li > test </ li >
< li > test </ li >
</ ul >
< script type ="text/javascript" >
chgListStyle( " a " );
</ script >
</ BODY >
</ HTML >