<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-color:#f00;} .two{ background-color:#dddabf;} .one.three{ background:#fff;} .two.three{ background:#000;} </style> </head> <body> <ul> <li>1.假字以数十字为基础假字数…</li> <li>2.假字以数十字为基础假字数…</li> <li>3.假字以数十字为基础假字数…</li> <li>4.假字以数十字为基础假字数…</li> <li>5.假字以数十字为基础假字数…</li> </ul> <div id='aa'>增加className</div> <script> function set(){ var liNode=document.getElementsByTagName('li'); for(var i=0;i<liNode.length;i++){ if(liNode[i].nodeType=='1'){ if(i%2==0){ liNode[i].className='one'; liNode[i].onmouseout=function(){ this.className='one'; } }else{ liNode[i].className='two'; liNode[i].onmouseout=function(){ this.className='two'; } } liNode[i].onmouseover=function(){ this.className='three'; } } } } addClass('aa','you') //li aa function addClass(element,value){ var a=document.getElementById(element); var b=a.className; if(!b){ a.className=value; }else{ a.className=b +' '+ value; } console.log(a.className); } onload=set; </script> </body> </html>