关注前端开发微信微信号web007007

原生JavaScript隔行换色

作者 管理员 发布时间 2012-07-11 15:20 文章分类 JavaScript 文章评论 抢沙发 阅读次数
JavaScript代码:
window.onload=function ()
{
 var oUl=document.getElementById('ul1');
 var aLi=oUl.getElementsByTagName('li');
 var i=0;

 for(i=0;i<aLi.length;i++)
 {
 if(i%2==0) //0,2,4,6,8,10...
 {
 aLi[i].className='alt';
 }
 }
};

css样式代码

*{padding:0;margin:0;list-style:none;}
#ul1{}
#ul1 li{height:30px;}
#ul1 li.alt{background:#ccc;}

html代码

<pre><ul id="ul1">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

本文固定链接: http://www.web92.net/544.html | WEB前端开发

该日志由 于2012年07月11日发表在 JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 原生JavaScript隔行换色 | WEB前端开发
关键字: