隔行变色的四种方法

方法一：

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
 </ul>


var oLis = document.getElementsByTagName('li');
oLis[0].style.background = 'blue'
oLis[1].style.background = 'red'
oLis[2].style.background = 'blue'
oLis[3].style.background = 'red'
oLis[4].style.background = 'blue'
oLis[5].style.background = 'red'
oLis[6].style.background = 'blue'

方法二 利用for 循环

var oLis = document.getElementsByTagName('li'); for (var i = 0; i < oLis.length; i++) { //oLis[i].style.backgroundColor = 'red' // 通过i来判断 i=0 第一行；i=1 第二行 // i%2 ==0 说明i是偶数 行是奇数行 // i%2 ==1 说明i是奇数 行是偶数行 if(i%2){ oLis[i].style.backgroundColor = 'red' } else{ oLis[i].style.backgroundColor = 'green' }

方法三 利用switch循环

 var oLis = document.getElementsByTagName('li');
 switch (i % 2) {
     case 0:          
         oLis[i].style.backgroundColor = 'green'
         break
     case 1:
         oLis[i].style.backgroundColor = 'red'
         break
 } 

方法四 利用三元 // 实现鼠标移上变色 移出变回原来的颜色 //点击li 弹出这是第xx行 背景颜色是xx

 var oLis = document.getElementsByTagName('li');
 olis[i].style.background = i%2 ? 'red'：'green'；
 olis[i].myBg = this.style.background;
 olis[i].myIndex = i;
 olis[i].onmouseenter = function(){
      this.style.background = 'gold' 
 }
 olis[i].onmouseleave = function(){
      this.style.background = this.myBg; 
 }
 olis[i].onclick = function(){
     alert(`这是第${this.myIndex} 背景颜色是${this.myBg}`)
 }
 }