利用JavaScript和CSS实现文本隔行变色的方法

让我们从一个简单的方法开始。两种风格。奇数{.}和。偶数.}在css中分别为奇数行和偶数行的不同背景颜色定义。加载网页后通过javascript获取要变色的标签列表，并执行以下代码：

//加载文件后，执行代码。window . onload=function(){//get ul id=' list '/object varlist=document . getelementbyid(' list ')；//获取list下所有Li varitems=list . getelementsbytagname(' Li ')；//遍历(var I=0；一.项目.长度；i ) { var className=(i % 2==0)？奇数' : '偶数'；项目[i]。类名=类名；}}实现不同线路的不同颜色是比较好的解决方案，这样在前端处理完全，不会和后端的逻辑混淆。该代码的效果基本如下：

但是，这种方法有一些问题：

您只能呈现指定的列表，但不能重用它。您不能指定颜色变化的开始位置。在处理表的颜色变化时，必须在onload事件中专门编写处理代码。对页面的依赖性太高，无法改进代码并将其转移到单独的函数中：

/* * *此方法用于列表的隔行变色效果，对于指定ID的列表可以灵活指定隔行颜色。* * @param id列表id * @待变色行的param项标签* @param奇数行样式类名，如果未指定，则默认为奇数* @param偶数行样式类名，如果未指定，则默认为偶数* @param开始变色行的索引，如果未指定，则默认值为0 * @param结束变色行的索引；如果未指定，默认值为list length */function row render(id，item，odd，偶数，start，end){//获取list容器varlist=document . getelementbyid(id)；//获取list varitems=list . getelementsbytagname(item)；//纠正初始位置。如果不是数字或超出范围，请从0开始if(isnan(start)| |(start 0 | | start=items . length)){ start=0；}//更正结束位置，如果不是数字或超出范围，则是列表的结尾，如果(isnan(end)| |(end start | | end=items . length)){ end=items . length；}//如果未指定odd，则默认值为‘odd’odd=odd | |‘odd’；//如果未指定偶数，则默认值为‘偶数’偶数=偶数| |‘偶数’；//遍历列表并呈现效果(var i=start我结束了；i ) { var className=' ' ((i % 2==0)？奇数：偶数)；项目[i]。类名=类名；}}用法：

Window.onload=function() {//显示梁的list1下的所有li标签，并使用默认样式和起始位置rowRender('list1 '，' Li ')；//显示list2下的所有li标签，使用指定的奇数和默认偶数，并使用指定的起始位置rowrender ('list2 '，' Li '，' odd1 '，null，2，6)；//对table1下的所有tr标记进行着色，使用指定的奇数和偶数，并使用默认起始位置rowrender ('table1 '，' tr '，' tr-奇数'，' tr-偶数')；//给table2下的所有tr标签着色，使用指定的奇数和偶数，使用指定的起始位置rowrender ('table2 '，' tr '，' tr-奇数'，' tr-偶数'，1)；}示例：表1。

rowRender('table1 '，' tr '，' tr-奇数'，' tr-偶数')；

表2

rowRender('table1 '，' tr '，' tr-奇数'，' tr-偶数'，1)；