首页 > 特效插件 > 色彩特效 >  简单的js+css隔行换色正文

简单的js+css隔行换色

特效介绍
隔行换色

当文章列表非常长,或者数据非常长,不容易分清行与行之间的区别。这个时候,隔行换色就非常重要了。如果用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布局的列表,都会应用隔行换色的效果。