如何动态分配样式表

ebayVIP 2010-09-20 03:26:43

我做了一个页面，显示的信息很多，页面囊肿……

我现在希望动态分配，比如我有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>

...全文

68 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ebayVIP 2010-09-20

打赏
举报

<!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>

已解决！
这是我在百度一个博客找到的，修改后可以实现了。

ebayVIP 2010-09-20

打赏
举报

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

晕，你理解错了。

上面我打出来就是说不想在页面代码中的LI附带class样式。。。

繼續google……

MrSLin 2010-09-20

打赏
举报

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

ebayVIP 2010-09-20

打赏
举报

var obj=document.getElementById("ulID").getElementsByTagName("li");

<ul id="ulID"><li>test</li></ul>

自己尝试去试了一下这样子写，可以用了。

但我希望可以不使用getelementbyid(UL ID="ulID"),而是使用UL CLASS="ulclass"。

请看到帖子的朋友多多指教！

ebayVIP 2010-09-20

打赏
举报

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";

}

}

}