当前位置:首页>网络学院>网页制作>Javascript教程>文章内容

用JS的方法控制LI的隔行换色效果

[ 来源:http://www.it55.com | 作者: | 时间:2007-08-31 | 收藏 | 推荐 ] 【

在table时代,各行换色效果很容易用html加css实现,如今的ul li列表又该如何实现这种各行换色效果呢?答案之一就是javascript,以下是代码。

精美韩国模版下载http://www.it55.com

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{
 font-size:12px;
 line-height:21px;
 color:#3E352F;
}
ul{
 width:200px;
 list-style:none;
}
.one{
 background:#CDC194;
}
.two{
 background:#DDDABF;
}
 
</style>
<script>
function set(){
var obj=document.getElementsByTagName("li");
var num=obj.length
for(var i=0;i<num;i++){
if(i%2==0){
obj[i].className="one";
}else{
obj[i].className="two";
}
}
}
</script>
</head>
<body onload="set()">
 <ul>
  <li>1.假字以数十字为基础假字数…</li> http://www.it55.com在线教程
  <li>2.假字以数十字为基础假字数…</li>
  <li>3.假字以数十字为基础假字数…</li>
  <li>4.假字以数十字为基础假字数…</li>
  <li>5.假字以数十字为基础假字数…</li>
 </ul> vd;k;l http://www.it55.com rdfg

</body>
</html>
sflj http://www.it55.com kg^&fgd

(编辑:IT资讯之家 www.it55.com

返回顶部
 

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]

图片文章