如何动态分配样式表

我做了一个页面，显示的信息很多，页面囊肿……我现在希望动态分配，比如我有5个样式，自动分配到5个标签中。<ul class="list">
<li class="st1">1</li>
<li class="st2">2</li>
<li class="st3">3</li>
<li class="st4">4</li>
<li class="st5">5</li>
</ul>很难描述…
大家请看看这个隔行换色例子。function set(){
//var obj=document.getElementsByTagName("li");
var obj=document.getElementById("li");
var num=obj.length
for(var i=0;i<num;i++){
if(i%2==0){
obj[i].className="one";
}else{
obj[i].className="two";
}
}
}<body onload="set()">
 <ul> 
  <li>1.假字以数十字为基础假字数…</li> 
  <li>2.假字以数十字为基础假字数…</li> 
  <li>3.假字以数十字为基础假字数…</li> 
  <li>4.假字以数十字为基础假字数…</li> 
  <li>5.假字以数十字为基础假字数…</li> 
 </ul> </body>

解决方案 »

  1.   

    function set(){
    var obj=document.getElementsByTagName("li");
    var num=obj.length
    for(var i=0;i<num;i++){
    if(i%2==0){
    obj[i].className="one";
    }else{
    obj[i].className="two";
    }
    }
    }上面的贴错了。回1楼：”大家请看看这个隔行换色例子“就是这样的啊，楼主不是自己写出来了么?
    这个不是我写的，它这个会应用到所有的<li></li>标记中……而我仅仅是需要绑定特定的<ul></ul>中…
      

  2.   

    var obj=document.getElementById("ulID").getElementsByTagName("li");<ul id="ulID"><li>test</li></ul>自己尝试去试了一下这样子写，可以用了。
    但我希望可以不使用getelementbyid(UL ID="ulID"),而是使用UL CLASS="ulclass"。请看到帖子的朋友多多指教！
      

  3.   

    用jQuery比较方便var obj=$('.ulclass')。
    现在的问题是你已经指定了CSS，而且你对每个li指定了class，这个样子你还要动态？费解。
      

  4.   


    晕，你理解错了。上面我打出来就是说不想在页面代码中的LI附带class样式繼續google……
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表格隔行换色_JS隔行换色</title>
    <style type="text/css" media="screen">
    <!-- /* PR-CSS */
    table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
    table td {border:solid #999;border-width:0 1px 1px 0;}
    .t1 {background-color:#000066;}/* 第一行的背景色 */
    .t2 {background-color:#339999;}/* 第二行的背景色 */
    .t3 {background-color:#FF6699;}
    .t4 {background-color:#CCCC66;}
    .mouse {background-color:#ccc;}/* 鼠标经过时的背景色 */
    -->
    </style>
    </head>
    <body>
    <!--http://hi.baidu.com/freezing2688/blog/item/6986f74e7febbd05b2de05f7.html-->
    <div id="xx">
    <dl>1111111</dl>
    <dl>22222</dl>
    <dl>3333333</dl>
    <dl>4444</dl>
    </div>
    <script type="text/javascript">
    <!--
    var obj=document.getElementById("xx").getElementsByTagName("dl");
    function $() {
        for (i=1;i<obj.length+1;i++) { 
        //obj[i-1].className = (i%2>0)?"t1":"t2"; 
    obj[i-1].className = "t"+[i]; 
        }
    }
    window.onload=$;
    for(var i=0;i<obj.length;i++) {
        obj[i].onmouseover=function(){
        this.tmpClass=this.className;
        this.className = "mouse";
        
        };
        obj[i].onmouseout=function(){
        this.className=this.tmpClass;
        };
    }
    //-->
    </script>
    </body>
    </html>
    已解决！
    这是我在百度一个博客找到的，修改后可以实现了。