特效介绍
当文章列表非常长,或者数据非常长,不容易分清行与行之间的区别。这个时候,隔行换色就非常重要了。如果用css,必须每一行的背景色都需要挂样式,非常麻烦,这里使用简短的几行js即可实现。
运行下面的代码查看隔行换色的效果:
提示:您可以先修改部分代码再运行
使用方法
1、在头部引入下面的js和css(这里只是样式,你可以根据需要设置下面的css为更合适的背景色。):<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>2、在body加上“onload="initUl()"”,意思就是加载时运行上面的隔行换色函数。
3、凡是本页面使用了ul和li布局的列表,都会应用隔行换色的效果。