<!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>

js实现隔行变色的更多相关文章

  1. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  2. JS实现隔行变色，鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  3. js实现隔行变色-------Day40

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/31837367 就这样開始了自己的第二个项 ...

  4. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  5. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  6. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  7. HTML系列：js和css多种方式实现隔行变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  9. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

随机推荐

  1. 第二篇 Scrum冲刺博客

    一.会议图片 二.项目进展 成员 完成情况 今日任务 冯荣新 搜索框,首页轮播图,分类导航 商品列表,商品详情轮播图 陈泽佳 背景展示,选择并显示图片 历史足迹,静态页面 徐伟浩 登录权限获取 商品信 ...

  2. muduo源码解析8-date类

    date class date:copyable { }: 作用: 此类作用主要是实现年月日和julianDay的互相转换内部最重要的一个数据成员m_julianDayNumber在mymuduo:: ...

  3. JS事件——添加、移除事件

    element.addEventListener(event, function, useCapture) 方法用于向指定元素添加事件句柄.   event: 必须.字符串,指定事件名.注意: 例 使 ...

  4. 【翻译】.NET 5 Preview8发布

    [翻译].NET 5 Preview8发布 今天,.NET 5预览8发布了,对于.NET5.0的功能开发已经完成了,这必须要排除待处理的bug,预览8是最后一次预览版本.预计11月正式的.NET5.0 ...

  5. 赫然：Windows Live Writer 批量博客更新软件使用教程

    http://www.wocaoseo.com/thread-144-1-1.html 推广人员需要使用多个博客,一个一个登陆更新是很麻烦的事情,网上的桌面批量更新博客软件也不少,今天在此推荐大家使用 ...

  6. 23种设计模式 - 领域问题（Interpreter）

    其他设计模式 23种设计模式(C++) 每一种都有对应理解的相关代码示例 → Git原码 ⌨ 领域问题 Interpreter 动机(Motivation) 在软件构建过程中,如果某一特定领域的问题比 ...

  7. 洛谷 P4995 跳跳！

    思路 贪心 从大到小排序,然后反复横跳,记录两个指针 \(l=1, r=n\),从 \(1\) 跳到 \(n\),再从 \(n\) 跳到 \(2\),然后从 \(2\) 跳到 \(n - 1\)--, ...

  8. 利用分块传输吊打所有WAF--学习笔记

    在看了bypassword的<在HTTP协议层面绕过WAF>之后,想起了之前做过的一些研究,所以写个简单的短文来补充一下文章里“分块传输”部分没提到的两个技巧. 技巧1 使用注释扰乱分块数 ...

  9. Mybatis入门篇之基础CRUD

    前言 作为一个资深后端码农天天都要和数据库打交道,最早使用的是 Hiberate,一个封装性极强的持久性框架.自从接触到 Mybatis 就被它的灵活性所折服了,可以自己写 SQL,虽然轻量级,但是麻 ...

  10. android 捕获未try的异常、抓取崩溃日志

    1.Thread.UncaughtExceptionHandler java里有很多异常如:空指针异常,越界异常,数值转换异常,除0异常,数据库异常等等.如果自己没有try / catch 那么线程就 ...