實現隔行變色的幾種方法

<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
複製代碼

第一種方式

用css的方式實現：先給li設置一個css樣式,而後使用css樣式中的奇偶數行xxx:nth-child(2n/2n+1)的代碼來實現隔行變色

<style>
       ul li {
           width: 400px;
           height: 100px;
           border: 1px solid coral;
           margin: 0 auto;
           list-style: none;
       }

       li:nth-child(2n){
           background: rgb(36, 218, 193);
       }
       li:nth-child(2n+1){
           background: rgb(187, 43, 43)
       }
   
   </style>
複製代碼

第二種方式

第二種咱們能夠採用js中的方法來設置，種類有不少，一共分爲五個小部分。

第一小部分較爲複雜，簡單來講就是給每一行設置一個背景色，所設計的代碼較多。

首先咱們設一個變量,獲取整個li，拿到一個集合

var olis =document.getElementsByTagName('li')
複製代碼

而後給每一行設置一個不一樣的顏色 注意索引[]

olis[0].style.background ='red'
 olis[1].style.background ='orange'
 olis[2].style.background ='yellow'
 olis[3].style.background ='green'
 olis[4].style.background ='skyblue'
 olis[5].style.background ='blue'
 olis[6].style.background ='purple'
複製代碼

以後咱們就能夠拿到一個彩虹狀的隔行變色了

第二小部分咱們能夠用for循環來作，具體代碼以下：

一樣的先獲取li元素，步驟同上。而後作一個for循環。

var olis =document.getElementsByTagName('li')
for (var i = 0; i < 7; i++)

      olis[i].style.background='skyblue'
      i++
      olis[i].style.background='pink'
      console.log(i)
複製代碼

第三小部分咱們能夠用判斷語句來寫，具體代碼以下

一樣的先獲取li元素，步驟同上。而後作一個IF ELSE判斷語句。

var olis =document.getElementsByTagName('li')
 console.log(i%2)
     if (i % 2 == 0) {
         olis[i].style.background = 'skyblue'
      } else {
          olis[i].style.background = 'pink'
      }
複製代碼

第四小部分咱們能夠用三元運算來作，‘？’ ‘：’的方式

`一樣的先獲取li元素，步驟同上。而後作一個三元運算`
複製代碼

var olis =document.getElementsByTagName('li')
console.log(i%2)
i%2==0?olis[i].style.background='skyblue':olis[i].style.background='pink'}
複製代碼

第五小部分其實是第四部分的簡化版，做用同樣，從繁化簡

olis[i].style.background =i%2==0 ?'skyblue':'pink'
複製代碼

這就是我總結的幾種不一樣方式的隔行變色的方法！