• js实现隔行变色


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                body,ul{margin: 0;padding: 0;}        
                ul{
                    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>

  • 相关阅读:
    Asp.Net : 实现一个 DataSet 或DataTable SELECT DISTINCT (字段唯一性)
    Jquery 局部刷新及 表单取值赋值 处理返回json数据 一些基本操作
    C# 自动化模型编辑Word
    泛型集合List的添加、访问、遍历和删除
    泛型转DataTable方法
    服务器按钮如何通过js验证再触发提交事件?
    Asp.Net 无限分类生成表格 &lt;后台自定义输出table&gt;
    table的innerHTML “未知运行错误”。
    js 截取字符串的方法 C# 正则判断数字及截取字符
    Microsoft Office Visio 2007 设计数据库关系图
  • 原文地址:https://www.cnblogs.com/menglong1214/p/9543789.html
Copyright © 2020-2023  润新知