<!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实现隔行变色
原文地址：https://www.cnblogs.com/menglong1214/p/9543789.html