<html xmlns="[url]http://www.w3.org/1999/xhtml[/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>
<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]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/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">
/*<![CDATA[*/
*{
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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/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">
/*<![CDATA[*/
*{
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>
<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">
<!--
div{border:#000 solid 2px;padding:0px;margin:0px}
div ul{width:606px;height:50px;padding:0px;margin:0px;list-style:none}
div ul li{border:1px #ccc solid;width:200px;height:50px;line-height:50px;text-align:left;font-weight:bold;float:left}
-->
</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>
<!--
div{border:#000 solid 2px;padding:0px;margin:0px}
div ul{width:606px;height:50px;padding:0px;margin:0px;list-style:none}
div ul li{border:1px #ccc solid;width:200px;height:50px;line-height:50px;text-align:left;font-weight:bold;float:left}
-->
</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">
/*<![CDATA[*/
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -300px;
}
.liclass1{
background:#FFF000;
}
/*]]>*/
</style>
</div>
<div style="background:#000000;width:610px;height:200px;" id="d">
<div style="background:#404040;width:200px;height:200px;"><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 style="background:#FD7C03;width:200px;height:200px;margin:-100px 0 0 -100px;">
<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 style="background:#eee;width:200px;height:200px;margin:-100px 0 0 100px;"><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>
/*<![CDATA[*/
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -300px;
}
.liclass1{
background:#FFF000;
}
/*]]>*/
</style>
</div>
<div style="background:#000000;width:610px;height:200px;" id="d">
<div style="background:#404040;width:200px;height:200px;"><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 style="background:#FD7C03;width:200px;height:200px;margin:-100px 0 0 -100px;">
<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 style="background:#eee;width:200px;height:200px;margin:-100px 0 0 100px;"><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>