现在的位置: 首页 > 综合 > 正文

Js 实现隔行换色及其鼠标划过变色

2013年01月02日 ⁄ 综合 ⁄ 共 1105字 ⁄ 字号 评论关闭
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ font-size:12px; line-height:21px; color:#3E352F;}
ul{ width:200px; list-style:none;}
.one{ background:#f00;}
.two{ background:#DDDABF;}
.one.three{ background:#fff}
.two.three{ background:#000}
</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";
   obj[i].onmouseout= function (){
    this.className="one";
   }
   }else{
   obj[i].className="two";
   obj[i].onmouseout= function (){
    this.className="two";
   }
   }
   obj[i].onmouseover= function (){
    this.className="three";
   }
  }
 }
 function addClass(element,value){
 if(!element.className){
  element.className = value;
 }else{
  newClassName = element.className;
  newClassName+= " ";
  newClassName+= value;
  element.className = newClassName;
 }
}
onload=set
-->
</script>
</head>
<body>
 <ul>
  <li>1.假字以数十字为基础假字数…</li>
  <li>2.假字以数十字为基础假字数…</li>
  <li>3.假字以数十字为基础假字数…</li>
  <li>4.假字以数十字为基础假字数…</li>
  <li>5.假字以数十字为基础假字数…</li>
 </ul>
</body>
</html> 

抱歉!评论已关闭.