JS“隔行换色” v1.0 by caikanxp @2008-1-23

运行代码(R) 我无语了，这blog输出页面时会擅自删除它认为“多余的”换行符，本来想加个同时兼容IE和FF的按钮弹出演示页面的，还是不成……

<! 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 >
< title > JS“隔行换色” v1.0 by caikanxp @2008-1-23 </ title >
< meta  name ="generator"  content ="editplus"   />
< meta  name ="author"  content ="caikanxp"   />
</ head >
< body >
< script  type ="text/javascript"  id ="script" >
<!--
/* *
 * JS“隔行换色” v1.0 by caikanxp @2008-1-23
 * 可对ul、ol列表项及表格行进行隔行设定不同的元素属性，
 * 也可对某个的元素所有子元素重复间隔地设定不同属性。
 * 用法：
 * interlaceStyle(o, s1[, s2[, ...[, sN]]]);
 * @param o
 *      要设定属性的所有元素的父元素，如ul、ol、table、及其它用户自定义的元素；
 *      可以为字符串，此时函数会以此字符串作为id查找相应的父元素。
 * @param s1,s2,...,sN
 *      要设定的背景色字符串；或是CSS样式字符串；或是元素处理回调函数，此函数将被传入将被处理的元素作为参数。
  */
function  interlaceStyle(o) {
     //  如果o是字符串，则转换为对应id的元素，并且元素有效时继续执行
     if  (o  =   typeof  o  ==   ' string '   ?  document.getElementById(o) : o) {
         var  items;  //  用于引用保存符合条件元素的数组，或引用对应的HTML元素集合
         if  ( /^ (ol | ul)$ / i.test(o.tagName)) {
             //  当元素是ol或ul列表时，查找符合条件的列表项并保存至items数组
            items  =  [];
             var  c  =  o.firstChild;
             while  (c) {
                 //  过滤非li元素及文本节点
                 if  ( /^ li$ / i.test(c.tagName)) {
                    items.push(c);
                }
                c  =  c.nextSibling;
            }
        }  else   if  ( /^ (table | thead | tbody | tfoot)$ / i.test(o.tagName)) {
             //  当元素是表格（头/体/脚）时，让items直接引用其tr行元素集合
            items  =  o.rows;
        }  else  {
             //  其它情况下查找所有的直接子元素保存至items数组
            items  =  [];
             var  c  =  o.firstChild;
             while  (c) {
                 //  过滤掉非元素节点
                 if  (c.nodeType  ==   1 ) {
                    items.push(c)
                }
                c  =  c.nextSibling;
            }
        }

         //  对符合条件的元素重复间隔地修改属性
         for (  var  i  =   0 ; i  <  items.length; i ++ ){
             var  arg  =  arguments[i  %  (arguments.length  -   1 )  +   1 ];
             if  ( typeof  arg  ==   ' function ' ) {
                 //  若属性参数是一个function，则调用它，并传入当前元素作为参数
                arg(items[i]);
            }  else   if  ( / : / .test(arg)) {
                 //  若属性字符串含有冒号，则当作CSS样式字符串处理
                items[i].style.cssText  =  arg;
            }  else   if  (arg) {
                 //  如果是其它情况并且参数有效，则当作背景色处理（特殊对待啊^^）
                items[i].style.backgroundColor  =  arg;
            }
        } 
    }
}

//  测试范例，IE6，FF2中测试通过
window.onload  =   function (event) {
     //  ul列表隔行设背景色
    interlaceStyle( ' unordered ' ,  ' #FFCCCC ' ,  ' #CCFFFF ' );

     //  ol列表设3种隔行背景色
    interlaceStyle( ' ordered ' ,  ' orange ' ,  ' tomato ' ,  ' orchid ' );

     //  自定义对某元素的所有子元素间隔设定样式
    interlaceStyle( ' other ' ,
         ' color: buttontext; background-color: buttonface; border: buttonface 5px outset; ' ,
         ' color: buttontext; background-color: buttonface; border: buttonface 5px inset; '
    );

     //  表格隔行通过回调函数设定属性，其中每行再对单元格设属性
    interlaceStyle( ' table ' ,
         function (e) {
            e.style.color  =   ' yellow ' ;
            interlaceStyle(e,  ' red ' ,  ' green ' ,  ' blue ' );
        },
         function (e) {
            e.style.backgroundColor  =   ' wheat ' ;
            interlaceStyle(e,  ' color: red; ' ,  ' color: green; ' ,  ' color: blue; ' );
        }
    );

     //  在文档尾部添加显示此脚本代码
     with (document.body.appendChild(document.createElement( ' pre ' ))) {
        style.cssText  =   ' background: #ddd; border: black 1px solid; padding: 1em; font-size: 12px; ' ;
        innerHTML  =   ' &nbsp; ' ;
        firstChild.data  =  document.getElementById( ' script ' ).innerHTML;
    }
}
// -->
</ script >
< ul  id ="unordered" >
     < li > unorderd list item </ li >
     < li > unorderd list item </ li >
     < li > unorderd list item </ li >
     < li > unorderd list item </ li >
     < li > unorderd list item </ li >
     < li > unorderd list item </ li >
</ ul >
< ol  id ="ordered" >
     < li > ordered list item </ li >
     < li > ordered list item </ li >
     < li > ordered list item </ li >
     < li > ordered list item </ li >
     < li > ordered list item </ li >
     < li > ordered list item </ li >
</ ol >
< div  id ="other" >
     < div > userdefined element </ div >
     < div > userdefined element </ div >
     < div > userdefined element </ div >
     < div > userdefined element </ div >
     < div > userdefined element </ div >
     < div > userdefined element </ div >
</ div >
< table  id ="table" >
     < tr >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td ></ tr >
     < tr >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td ></ tr >
     < tr >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td ></ tr >
     < tr >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td ></ tr >
     < tr >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td ></ tr >
     < tr >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td >< td > table cell </ td ></ tr >
</ table >
</ body >
</ html >