浅谈实现网页交替背景颜色的几种方法

WordPress 的评论模板部分都会定义一个$oddcomment函数用来实现评论的样式交替变换，采取交替样式可以使列表有一定分区度，便于浏览。我稍稍总结了下，分别通过javascript, php和CSS三种方式进行实现，其中CSS实现方法还几乎处于理想状态，仅供参考。

实现方法之Javascript篇

假设我们有个id名为 list 的无序列表ul，其下有5项item (li)。我们可以用getElementById和getElementsByTagName先找到这些item，然后通过for循环筛选出奇数项并赋予class值。再通过CSS定义该奇数项class样式从而达到交替样式的目的。javascript代码如下:

 function alterItem() {
 var list=document.getElementById('list');
 var items=list.getElementsByTagName('li'); 
 for (var i=0;i<items.length;i++) {
   if(i%2==0)
   items[i].className='odd'; 
   }
 }

 window.onload=alterItem; 

最后用通过CSS定义 .odd样式就行了。

实现方法之PHP篇

此方法来源于WordPress论坛的这篇日志。我曾经在PP的sidenotes部分就是用这种方法实现交替背景的(WP的comment部分已经有oddcomment函数了，无须再费周折)，我直接照搬原来PP theme里的sidenotes部分代码。

<?php query_posts('category_name=sidenotes&showposts=3'); ?>
     <?php while (have_posts()) : the_post(); ?>
     <div id="p<?php the_ID(); ?>" class="<?=($i%2)?"even":"odd";$i++;?>">
     <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php strip_tags(the_title()); ?>" class="title"><?php the_title(); ?></a>
     <?php the_content(); ?>
     </div>
<?php endwhile;>		

注意其中加粗部分，先在模板文件顶部插入如下代码<?$i;?>，然后在class里加入这句判断语句就够了<?=($i%2)?"even":"odd";$i++;?>。学过C语言的都知道这是个if..else判断语句的缩写形式– If (Expression) ? true : false，如果满足表达式，则执行? 部分，否则执行 : 部分。也就是说，满足 $i%2等于0，即$i为偶，则赋予class为even值，然后$i 加一，滚动到下一item上进行第二次判断。

实现方法之CSS篇

CSS2有个:nth-child的选择器，这是个非常非常强大的选择器，你可以定义Element:nth-child(3)来找到为其父元素下的第三个子元素，你也可以定义Element:nth-child(odd) 或者Element:nth-child(even) 来查找其父元素下的奇偶子元素，甚至可以用Element:nth-child(3n+2) 来找到其父元素下的第3n+2个元素( n=0,1,2…)。通过CSS方法定义那太简单了!

ul#list li:nth-child(odd) {background:#000;color:#fff}

ul#list li:nth-child(even) {background:#fff;color:#000;}

不过，这么好的方法…目前只有linux下的konqueror浏览器支持(注:Konqueror是目前唯一100%通过CSS3所有选择器测试的浏览器)，好在Opera已经开始落实支持该选择器的工作了。

我个人比较喜欢这种cutting edge的方式! 如果你想让你的网站/blog做的更先锋的话就用这种方式吧!

顺带说句: 其实linux下的konqueror是款相当棒的浏览器，他们对CSS的支持一向都是做的最棒的(目前还有个opacity没解决)，连multiple-backgrounds他们都支持了!