<html xmlns="[url][/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style>
body{
font-size:12px;
line-height:21px;
color:#191970;
}
ul{
width:200px;
list-style:none;
}
.one{
background:#00FA9A;
}
.two{
background:#FF0000;
}
</style>
<script>
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";
}
}
}
</script>
</head>
<body onload="set()">
<ul>
<li>1.哈哈…</li>
<li>2.哈哈…</li>
<li>3.哈哈…</li>
<li>4.哈哈…</li>
<li>5.哈哈…</li>
</ul>
</body>
</html> 還有一個例子：<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url][/url]">
<html xmlns="[url][/url]" xml:lang="utf-8" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<title>橫排列表(li)的左右對齊</title>
<style type="text/css">

*{
margin:0;
padding:0;
}
.overdiv{
width:290px;
height:300px;
overflow:hidden;
background-color:#EEE8AA;
}
.overdiv ul{
list-style:none;
width:320px;
height:auto;
}
.overdiv li{
float:left;
width:80px;
height:80px;
margin-right:25px;
margin-bottom:5px;
background-color:#FF0000;
text-align:center;
line-height:80px;
}

</style>
</head> <body>
<div class="overdiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html> 滑鼠經過就變色的:<style type="text/css">

</style>
<div>
<ul onmouseover="javascript:this.style.background='#cccccc';" onmouseout="javascript:this.style.background='';">
<li>第1行第1列</li>
<li>第1行第2列</li>
<li>第1行第3列</li>
</ul>
<ul onmouseover="javascript:this.style.background='#cccccc';" onmouseout="javascript:this.style.background='';">
<li>第2行第1列</li>
<li>第2行第2列</li>
<li>第2行第3列</li>
</ul>
<ul onmouseover="javascript:this.style.background='#cccccc';" onmouseout="javascript:this.style.background='';">
<li>第3行第1列</li>
<li>第3行第2列</li>
<li>第3行第3列</li>
</ul>
<div>
滑鼠經過的時候變色：<style type="text/css">

div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -300px;
}
.liclass1{
background:#FFF000;
}

</style>
</div>
<div id="d">
<div ><ul >
<li onmouseOver="changeClass1(document.all.d,0)" onmouseOut="changeClass2(document.all.d,0)">第1行第1列</li>
<li onmouseOver="changeClass1(document.all.d,1)" onmouseOut="changeClass2(document.all.d,1)">第1行第2列</li>
<li onmouseOver="changeClass1(document.all.d,2)" onmouseOut="changeClass2(document.all.d,2)">第1行第3列</li>
</ul> </div>
<div >
<ul>
<li onmouseOver="changeClass1(document.all.d,0)" onmouseOut="changeClass2(document.all.d,0)">第2行第1列</li>
<li onmouseOver="changeClass1(document.all.d,1)" onmouseOut="changeClass2(document.all.d,1)">第2行第2列</li>
<li onmouseOver="changeClass1(document.all.d,2)" onmouseOut="changeClass2(document.all.d,2)">第2行第3列</li>
</ul> </div>
<div ><ul >
<li onmouseOver="changeClass1(document.all.d,0)" onmouseOut="changeClass2(document.all.d,0)">第3行第1列</li>
<li onmouseOver="changeClass1(document.all.d,1)" onmouseOut="changeClass2(document.all.d,1)">第3行第2列</li>
<li onmouseOver="changeClass1(document.all.d,2)" onmouseOut="changeClass2(document.all.d,2)">第3行第3列</li>
</ul></div></div>
<script>
function changeClass1(obj,count){
if(obj.childNodes.length<=0){
return ;
}
for(var j = 0;j< obj.childNodes.length; j++)
{
if(obj.childNodes[j].childNodes.length<=0){
continue;
}
for(var k =0 ; k <obj.childNodes[j].childNodes.length ;k ++){
if(obj.childNodes[j].childNodes[k].childNodes.length<count){
continue;
}
obj.childNodes[j].childNodes[k].childNodes[count].className="liclass1"
} //for
}//for
}
function changeClass2(obj,count){
if(obj.childNodes.length<=0){
return ;
}
for(var j = 0;j< obj.childNodes.length; j++)
{
if(obj.childNodes[j].childNodes.length<=0){
continue;
}
for(var k =0 ; k <obj.childNodes[j].childNodes.length ;k ++){
if(obj.childNodes[j].childNodes[k].childNodes.length<count){
continue;
}
obj.childNodes[j].childNodes[k].childNodes[count].className=""
} //for
}//for
}
</script>

運用li元素進行斑馬色顯示

相關文章