JS+CSS实现Li列表隔行换色效果的方法

下面是JS+CSS实现Li列表隔行换色效果的方法完整攻略。

1. 使用CSS的nth-child选择器

CSS中可以使用:nth-child选择器来选择列表中的每一个元素，可以通过设置对应的颜色来实现隔行换色的效果。

首先，在样式表中添加以下代码：

li:nth-child(even) {
  background-color: #f2f2f2;
}
li:nth-child(odd) {
  background-color: #fff;
}

这段代码将会使得列表中的偶数项背景颜色为浅灰色#f2f2f2，奇数项背景颜色为白色#fff。

2. 使用JavaScript来动态设置列表项的类名

如果不想在CSS中使用:nth-child选择器，也可以通过JavaScript来动态修改列表项的类名，从而实现隔行换色的效果。

例如，在HTML中，我们可以为列表中每个元素添加一个类名list-item：

<ul>
  <li class="list-item">列表项1</li>
  <li class="list-item">列表项2</li>
  <li class="list-item">列表项3</li>
  <li class="list-item">列表项4</li>
  <li class="list-item">列表项5</li>
</ul>

然后，在JavaScript中，我们可以将偶数项的类名设置为list-item even，奇数项的类名设置为list-item odd：

var listItems = document.querySelectorAll('.list-item');
for (var i = 0; i < listItems.length; i++) {
  if (i % 2 === 0) {
    listItems[i].classList.add('even');
  } else {
    listItems[i].classList.add('odd');
  }
}

对应的CSS样式如下：

.even {
  background-color: #f2f2f2;
}
.odd {
  background-color: #fff;
}

这样就能够实现列表隔行换色的效果了。

示例代码：https://codepen.io/pen/?template=GRWvReN