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