js实现隔行变色 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,ul{margin: 0;padding: 0;}        
            ul{
                width:500px;
                margin:100px auto ;
                padding: 10px;
                border: solid 1px #E3E3E3;
                list-style:none;
                line-height: 2;
            }
            
            li{
                padding: 8px 10px;
                border-radius: 8px;
            }
            
        /*    li:nth-child(odd){
                background: #E7E7E7;
            }
            
            li:nth-child(even){
                background: #EEE8AA;
            }
            
            li:hover{
                background: red;
                color: white;
            }*/
            
            .bg1{
                background: #E3E3E3;
            }
            
            .bg2{
                background: #EEE8AA;
            }
            
            .bg3{
                color: white;
                background: red;
            }
        </style>
    </head>
    <body>
        <ul class="news">
            <li>疑似作弊者对手:没手机他像换个人 下得又慢又差</li>
            <li>九冠王队重庆新姿态战围甲 古力:希望不拖队友后腿</li>
            <li>拜仁全队赛前誓师！封死C罗 干掉皇马进决赛！</li>
            <li>在本赛季欧洲金靴的竞争中，梅西还没有坐稳优势…</li>
            <li>疑似作弊者对手:没手机他像换个人 下得又慢又差</li>
            <li>九冠王队重庆新姿态战围甲 古力:希望不拖队友后腿</li>
            <li>拜仁全队赛前誓师！封死C罗 干掉皇马进决赛！</li>
            <li>在本赛季欧洲金靴的竞争中，梅西还没有坐稳优势…</li>
            <li>疑似作弊者对手:没手机他像换个人 下得又慢又差</li>
            <li>九冠王队重庆新姿态战围甲 古力:希望不拖队友后腿</li>
            <li>拜仁全队赛前誓师！封死C罗 干掉皇马进决赛！</li>
            <li>在本赛季欧洲金靴的竞争中，梅西还没有坐稳优势…</li>
        </ul>
    </body>
    <script type="text/javascript">
        //通过类名得到的是一个类数组，数据类型是object;它也有自己对应的索引值，索引从0开始
        var news = document.getElementsByClassName('news')[0];
        //给news元素创建了一个属性mAtt并赋值mValue
        //1.setAttribute("属性名","属性值") 设置属性   getAttribute("属性名")
//        news.setAttribute("mAtt","mValue");
//        console.log(news.getAttribute("mAtt"));

        //2. html自定义属性   标签元素.属性 = "属性值";
//        news.att = "value";
//        console.log(news.att)


        //通过标签名来获取标签元素,得到类数组
        var lis = news.getElementsByTagName('li');
        console.log(typeof lis);
        
        //遍历lis
        for (var i = 0; i < lis.length; i++) {
            if(i % 2 == 1){
                lis[i].className = "bg1";
                //自定义一个属性来暂时存储当前className的值
//                lis[i].oldClassName = "bg1";
            }else{
                lis[i].className = "bg2";
//                lis[i].oldClassName = "bg2";
            }
            
            //鼠标事件
            //onmouseover
            lis[i].onmouseover = function(){
                //当鼠标滑过，改变className之前，将原来的className暂时存储起来
                this.oldClassName = this.className;
                //lis[i].className = "bg3";//循环内部设置事件函数，事件函数再循环执行完毕之后才会执行；
                this.className = "bg3";
            }
            
            //鼠标离开事件onmouseout
            lis[i].onmouseout = function(){
                //怎么样才能回到原来的样式呢
                //涉及到html里面怎么去添加一个自定义属性
                this.className = this.oldClassName;
            }
        }
        
            
    </script>
</html>

 

 

 

posted @ 2018-08-27 18:02  乱了夏天蓝了海  阅读(3485)  评论(0)    收藏  举报