首页 » 建站 » 网站设计 » 正文

利用JS控制li隔行换色

发表于: 翰林院营销顾问 · 2011-6-29 ·  498 views  ·  0 replies 

因为工作需要,需要写一个隔行换色,找到一些现成的,都是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>

实实在在的写法。但是比较繁琐。

本文链接: http://www.hanlinweb.com/every-other-line-change-color.html
0 like+
«上一篇: :下一篇»

相关文章

网站设计页面形式的分析

网站设计页面形式的分析

没有一个好的网站设计基础,就不会取得理想的网站排名效果...

客户说网站要做大气一点

客户说网站要做大气一点

在百度UEO看到篇文章,觉得还满有点意思,分享给大家看看。...

Windows平台上的强大的文本编辑器

Windows平台上的强大的文本编辑器

这里介绍两款灰常强大的软件,就是那些能让你们保持高效率...

全国各省管局备案过程真实性核验注意事项

全国各省管局备案过程真实性核验注意事项

简称 省 份 需要快递 核验单 需要幕布背景 照片 特殊要...

设计中的极简主义

设计中的极简主义

设计中的极简主义已经出现一段时间了,并且现在看起来正在...

优秀的表格设计技巧

优秀的表格设计技巧

表格信息通常是很乏味的 从某种意义上来说,的确如此。一个...

0 thoughts on “利用JS控制li隔行换色”

  1. 还没有任何评论,你来说两句吧

Leave a reply