用li标签实现隔行变色效果

2009-04-14 23:06:48 | 【大 中 小】
  • 蓝色背景的LI
  • 蓝色背景的LI
  • 蓝色背景的LI
  • 蓝色背景的LI
  • 蓝色背景的LI

本脚本通过JavaScript搜集所有li标签，然后对li标签集隔行设定其背景颜色

查看全部代码 View Code

在网页<body>区添加以下代码 

 <script type="text/javascript">

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
function bgChange(){
 var lis= document.getElementsByTagName('li');
 for(var i=0; i<lis.length; i+=2)
 lis[i].style.background = '#f3f3f3';
}
window.onload = bgChange;
</script>
<ul>
<li>蓝色背景的LI</li>
<li>蓝色背景的LI</li>
<li>蓝色背景的LI</li>
<li>蓝色背景的LI</li>
<li>蓝色背景的LI</li>
</ul>

推荐给朋友

上一篇： 非常漂亮的脚本生成的日历  
下一篇： 使用AJAX的十大理由

相关资源