简单的js+css隔行换色_色彩特效_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

简单的js+css隔行换色

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-09-23 16:53:22 去下载去预览

特效介绍

当文章列表非常长，或者数据非常长，不容易分清行与行之间的区别。这个时候，隔行换色就非常重要了。如果用css，必须每一行的背景色都需要挂样式，非常麻烦，这里使用简短的几行js即可实现。
运行下面的代码查看隔行换色的效果：

<html> <head> <title>简单的js+css隔行换色-我爱模板网</title> <style> .l1{background:#0f0} .l2{background:#f00} </style> <script> function initUl(){ var a=document.getElementsByTagName('ul'); for(var i=0;i<a.length;i++){ var v=document.getElementsByTagName('li'); var ii=1; for(var j=0;j<v.length;j++){ if(v[j].parentNode==a[i]){ if(ii++%2==0){ v[j].className="l2"; } else{ v[j].className="l1"; } } } } } </script> </head> <body onload="initUl()"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

1、在头部引入下面的js和css(这里只是样式，你可以根据需要设置下面的css为更合适的背景色。)：

01<style>
02.l1{background:#0f0}
03.l2{background:#f00}
04</style>
05<script>
06function initUl(){
07    var a=document.getElementsByTagName('ul');
08    for(var i=0;i<a.length;i++){
09        var v=document.getElementsByTagName('li');
10        var ii=1;
11        for(var j=0;j<v.length;j++){
12            if(v[j].parentNode==a[i]){
13                if(ii++%2==0){
14                    v[j].className="l2";
15                }
16                else{
17                    v[j].className="l1";
18                }
19            }
20        }
21    }
22}
23</script>

2、在body加上“onload="initUl()"”，意思就是加载时运行上面的隔行换色函数。
3、凡是本页面使用了ul和li布局的列表，都会应用隔行换色的效果。