<!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. windows服务器下,mysql运行一段时间之后忽然无法连接,但是mysql服务启动正常

    出现这种情况以前都是重启服务器可以解决,但是治标不治本,一段时间之后仍然会出现此问题. 此问题不是mysql应用程序的问题而是windows server system 的配置问题.因此需要修改win ...

  2. topic相关问题

    1.下面是一个topic数据出现堵塞的情况示图. 如图所示,delta列表示当前分区未处理的数据条数,kafka current表示推送到topic的数据量,spout current表示已经处理的数 ...

  3. Java mysql数据库连接Demo1

    public class MysqlUtil { /** * 链接数据库 */ /** * 方法一: * 加载驱动的方法不止一种,但这种最常用 */ public static Connection ...

  4. Java多线程_线程池

    作用我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为 ...

  5. vimrc备份

    备份一下我的 gvim 配置文件 " 使vimrc文件立马生效 autocmd BufWritePost $MYVIMRC source $MYVIMRC " 设置自己的Leade ...

  6. 服务应用突然宕机了?别怕,Dubbo 帮你自动搞定服务隔离!

    某日中午,午睡正香的时候,接到系统的报警电话,提示生产某物理机异常宕机了,目前该物理机已恢复,需要重启上面部署的应用. 这时瞬间没有了睡意,登上堡垒机,快速重启了应用,系统恢复正常.本想着继续午睡,但 ...

  7. 安装yarn 心得分享

    初次使用yarn ,坑的我,全局安装完@vue/cli,安装之后就是说vue不是内部命令,研究好久,总结一下分享大家一起学习 1,首先安装yarn: 安装yarn 去官网下载yarn 安装包 默认安装 ...

  8. 【小白学PyTorch】1 搭建一个超简单的网络

    文章目录: 目录 1 任务 2 实现思路 3 实现过程 3.1 引入必要库 3.2 创建训练集 3.3 搭建网络 3.4 设置优化器 3.5 训练网络 3.6 测试 1 任务 首先说下我们要搭建的网络 ...

  9. Mysql如何将某个字段的值,在原有的基础上+1?

    Eg: 电商项目中,需要统计某件商品的购买数量问题,这时产品提了一个bug,告诉你我需要你做一个购买数量统计?你会怎么做呢? 这里我只说我自己的思路,首先是浏览加购物车,创建订单并支付,mq消息消费后 ...

  10. 高可用集群corosync+pacemaker之crmsh使用(二)

    上一篇博客我们聊到了crmsh的安装以及配置一个资源到corosync+pacemaker高可用集群上的相关命令的用法,回顾请参考https://www.cnblogs.com/qiuhom-1874 ...