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

摘要：这篇JavaScript栏目下的“使用JavaScript和CSS实现文本隔行换色的方法”，介绍的技术点是“JavaScript、使用java、隔行换色、CSS、实现、方法”，希望对大家开发技术学习和问题解决有帮助。

先来看一个简单的方法。

在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页加载后通过 javascript 获取要变色的标签列表，执行如下代码：

// 当文件加载时，执行代码。

window.onload = function() {

// 获取

var list = document.getElementById('list');

// 获取list下面的所有li

var items = list.getElementsByTagName('li');

// 遍历items

for (var i = 0; i < items.length; i++) {

var className = (i % 2 == 0) ? ' odd' : ' even';

items[i].className += className;

}

}

实现不同行的不同颜色，这样变完全在前端处理，不会与后端的逻辑混淆，是一种比较好的解决方案。

那么这种代码实现起来效果基本上是这样的：

不过，这种方法存在一些问题：

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

不能指定变色的起始位置，在处理表格的变色时，得专门写处理

代码全在 onload 事件中，对页面的依赖太高

将其代码进行改进并移入到一个单独的函数中去：

/**

* 此方法用于列表的隔行变色效果，可以灵活得为指定ID的列表指定隔行的颜色。

*

* @param id 列表的id

* @param item 要变色的行的标签

* @param odd 奇数行的样式类名，如果不指定，则默认为odd

* @param even 偶数行的样式类名，如果不指定，则默认为even

* @param start 开始变色的行的索引，如果不指定，则默认为0

* @param end 结束变色的行的索引，如果不指定，则默认为列表长度

*/

function rowRender(id, item, odd, even, start, end) {

// 获取列表容器

var list = document.getElementById(id);

// 获取列表

var items = list.getElementsByTagName(item);

// 修正初始位置，如果不是一个数字或者越界，则从0开始

if (isNaN(start) || (start < 0 || start >= items.length)) {

start = 0;

}

// 修正结束位置，如果不是一个数字或者越界，则为列表末尾

if (isNaN(end) || (end < start || end >= items.length)) {

end = items.length;

}

// 如果没有指定odd，则默认为'odd'

odd = odd || 'odd';

// 如果没有指定even, 则默认为'even'

even = even || 'even';

// 遍历列表并渲染效果

for (var i = start; i < end; i++) {

var className = ' ' + ((i % 2 == 0) ? odd : even);

items[i].className += className;

}

}

用法：

window.onload = function() {

// 渲梁list1下所有的li标签，使用默认的样式和起始位置

rowRender('list1', 'li');

// 渲梁list2下所有的li标签，使用指定的odd和默认的even，使用指定的起始位置

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

// 渲梁table1下所有的tr标签，使用指定的odd和even，使用默认的起始位置

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

// 渲梁table2下所有的tr标签，使用指定的odd和even，使用指定的起始位置

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

}

示例：

Table 1

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

Table 2

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