<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> 轉載于:https://www.cnblogs.com/positive/p/3656684.html
![美團彈性伸縮系統的技術演進與落地實踐[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)