隔行变色（ 表格隔行变色 + LI 浮动隔行变色 ）

第一篇文章哈  随便写写

表格隔行变色，一个很普通的js效果...  
但是我非常不喜欢用table，一是代码累赘，再是...
我通常用li写信息列表。

例如相册列表，
通常是用浮动排版，或者block-inline...
一行有好几个li元素
这时要隔行变色的话...

首先假如总共有7个li，
一行有3个li，
那最后一行就只有一个li，
如果要隔行变色的话，
最后一行自然得添加2个li并给上背景...

/*
 parentNodeId   父元素
 nodeName       子元素nodeName
 VerticalNum    一行有几个nodeName的元素
 color          颜色
 startRow       开始的设置背景行数 1 or 2
 */
 function rowBj(parentNodeId,nodeName,VerticalNum,color,startRow){
     var parentNode=document.getElementById(parentNodeId);
     var allNode=parentNode.getElementsByTagName(nodeName);
 
     if(startRow!=1&&startRow!=2){startRow=1}
 
     var k=(allNode.length)/VerticalNum;
     while(Math.floor(k)!=k){
         var newNode=document.createElement(nodeName);
         parentNode.appendChild(newNode);
         allNode=parentNode.getElementsByTagName(nodeName);
         k=(allNode.length)/VerticalNum;
     }
 
     for (var i=0;i<allNode.length;i++){
         var hangshu=Math.floor((i+VerticalNum)/VerticalNum);
         var num=hangshu/2;
         if(startRow==2&&num==Math.floor(num)){allNode[i].style.background=color}
         else if(startRow==1&&num!=Math.floor(num)){allNode[i].style.background=color}
         else{allNode[i].style.background=''}
     }
     
 }

调用
window.οnlοad=function(){
    rowBj('qita','li',4,'#c99',1);
    rowBj('qita_1','li',1,'#c99',2);
    rowBj('qita_2','tr',1,'#c99',2);
}

-------------------------------------------------------------

@Canrz 说的css方式 我还真没用过 学习了
也贴出示例
[ie8-  不支持  

css 隔行换色：
    nth-of-type / nth-child odd（单） even（双）

<style>
#qita_3{width:800px;overflow:hidden;padding:10px;background:#666;}
#qita_3 li{height:30px;background:#999;margin:6px 0;}
#qita_3 li:nth-child(odd){background:#999;}
#qita_3 li:nth-child(even){background:#c99;}

#qita_4{width:800px;overflow:hidden;padding:10px;background:#666;}
#qita_4 li{width:190px;height:30px;float:left;margin:6px 5px;background:#999;}
#qita_4 li:nth-child(8n+0),
#qita_4 li:nth-child(8n-1),
#qita_4 li:nth-of-type(8n-2),
#qita_4 li:nth-of-type(8n-3){background:#c99;}
</style>

<ul id="qita_3">
<li>list 1</li><li>list 2</li><li>list 3</li>
<li>list 4</li>
</ul>

<ul id="qita_4">
<li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li>
<li>list 5</li><li>list 6</li><li>list 7</li><li>list 8</li>
<li>list 9</li><li>list 10</li><li>list 11</li><li>list 12</li>
<li>list 13</li><li>list 14</li><li>list 15</li>
</ul>

 

 

demo

转载于:https://www.cnblogs.com/chocho/p/4381955.html