使用JavaScript和CSS实现文本隔行换色的方法

遍历这些

这种方法的实现效果是，文本的每一行都会有不同的背景颜色。这种处理方式完全在前端进行，不会与后端的逻辑混淆，是一种简洁有效的解决方案。

这种方法也存在一些局限性：

它只能对指定的一个列表进行渲染，不能跨多个列表重用。

代码全部放在onload事件中，对页面的依赖性较高。如果页面加载时间较长或出现错误，可能会影响用户体验。

函数rowRender详解

参数说明：

`odd`：奇数行的样式类名，如果不指定，默认为`odd`。

`even`：偶数行的样式类名，如果不指定，默认为`even`。

`start`：开始变色的行的索引，如果不指定，从第一行开始。

使用示例：

在页面加载完成后，我们可以调用rowRender函数来应用样式。

```javascript

window.onload = function() {

// 为list1下的所有li标签应用默认样式，从第一行开始

rowRender('list1', 'li');

// 为list2下的指定奇数行应用指定样式，从第三行到第六行

rowRender('list2', 'li', 'odd1', null, 2, 6);

// 为table1下的所有tr标签应用指定的样式类，从第一行开始

rowRender('table1', 'tr', 'tr-odd', 'tr-even');

// 为table2从第二行开始的tr标签应用指定的样式类

rowRender('table2', 'tr', 'tr-odd', 'tr-even', 1);

}

```

Table 1

（使用rowRender函数为table1的所有tr标签应用样式）

Table 2

（使用rowRender函数从第二行开始为table2的tr标签应用样式）