用CSS+JS控制Li背景颜色交替VIEW:704

twosecond

于 2009-07-03 22:57:00 发布

阅读量784

点赞数

分类专栏： Web 文章标签： css

Web 专栏收录该内容

119 篇文章

订阅专栏

本文介绍了一种使用JavaScript为HTML列表项动态设置背景颜色的方法，通过遍历列表元素并根据其位置分配不同的类来实现交替的颜色显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>懒人图库</title>
<style>
.l1{background:#ffffff}
.l2{background:#f4f4f4}
</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>6</li>
</ul>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>