利用JS控制li隔行换色
因为工作需要，需要写一个隔行换色，找到一些现成的，都是table的。很不灵活。加上JS不熟，几乎属于盲人，所以无奈东看看，西看看，再反复思考，终于完成了一个。有JS厉害的朋友可以帮忙完善一下，呵呵。
直接上代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.li02{background:#ccc}
-->
</style>
</head>
<body>
<div id="g2">
<ul>
<li>隔行换色的代码</li>
<li>隔行换色的代码</li>
<li>隔行换色的代码</li>
<li>隔行换色的代码</li>
<li>隔行换色的代码</li>
<li>隔行换色的代码</li>
<li>隔行换色的代码</li>
</ul>
</div>
<script type="text/javascript">
var obj=document.getElementById("g2").getElementsByTagName("li");
var num=obj.length
for(var i=0;i<num;i++){
if(i%2==1){
obj[i].className="li02";
}
}
</script>
</body>
</html>
另外，还有其他几种方法。我们可以根据自己的实际情况来使用。
2、background背景图片如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。
3、CSS Expression
文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
注意：本方法浏览器兼容度不够，不支持FF3。
4、class分别定义
<ul>
<li class="bgcolor"></li>
<li></li>
<li class="bgcolor"></li>
<li></li>
</ul>
实实在在的写法。但是比较繁琐。
«上一篇：每个憋屈的设计师背后都有一群指点江山的大神
ECSHOP模板结构说明：下一篇»
还没有任何评论，你来说两句吧