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

weixin_34254823

于 2019-06-24 16:35:30 发布

阅读量255

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/positive/p/3656684.html

版权

<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

weixin_34254823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现隔行换色及其鼠标滑过变色

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标换色及鼠标滑过变色</title><style>b...
复制链接

扫一扫