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