js写ul li间隔变色

你可以通过JavaScript为每个li元素添加不同的CSS类来实现间隔变色的效果。具体代码如下：

var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
  if (i % 2 === 0) {
    listItems[i].classList.add("even"); // 添加偶数行的CSS类
  } else {
    listItems[i].classList.add("odd"); // 添加奇数行的CSS类
  }
}

然后在CSS文件中定义even和odd类的样式，如下所示：

li.even {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

li.odd {
  background-color: #fff; /* 奇数行背景色 */
}

相关问题

js写ul li鼠标放上去时间隔变色，离开则变回来

你可以通过JavaScript为每个li元素添加鼠标移入和移出的事件监听器，然后在事件处理函数中切换CSS类来实现鼠标放上去时间隔变色的效果。具体代码如下：

var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener("mouseenter", function() {
    this.classList.add("hover"); // 添加鼠标移入时的CSS类
  });
  listItems[i].addEventListener("mouseleave", function() {
    this.classList.remove("hover"); // 移除鼠标移入时的CSS类
  });
}

然后在CSS文件中定义hover类的样式，如下所示：

li.hover {
  background-color: #f2f2f2; /* 鼠标移入时背景色 */
}

这样，当鼠标移入li元素时，该元素的背景色就会变成#f2f2f2，当鼠标移出时，背景色又会变回原来的颜色。

js的ulli选择器

在JavaScript中，可以使用querySelectorAll选择器来选择ul下的所有li元素。具体代码如下所示：

const liElements = document.querySelectorAll('ul li');
console.log(liElements);

这段代码会返回ul下的所有li元素的集合。\[2\]\[3\]
#### 引用[.reference_title]
- *1* [用jquery ul li 实现select功能](https://blog.csdn.net/qq_44830441/article/details/127570030)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [JavaScript：DOM选择器](https://blog.csdn.net/xuelian3015/article/details/127455281)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]