js实现隔行换色及其鼠标滑过变色

js实现隔行换色及其鼠标滑过变色
<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> 
js实现隔行换色及其鼠标滑过变色

 

js实现隔行换色及其鼠标滑过变色,布布扣,bubuko.com

js实现隔行换色及其鼠标滑过变色

上一篇:jquery mobile页面跳转后js不执行的问题


下一篇:HTML和JSON的数据交互-HTML模板