实现隔行变色的几种方法

<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'
复制代码

这就是我总结的几种不一样方式的隔行变色的方法！