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


Posted in Javascript onNovember 04, 2015

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

// 当文件加载时,执行代码。
window.onload = function() {
 // 获取<ul id="list" />对象
 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; 
 }
}

实现不同行的不同颜色,这样变完全在前端处理,不会与后端的逻辑混淆,是一种比较好的解决方案。
那么这种代码实现起来效果基本上是这样的:

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

不过,这种方法存在一些问题:

  • 只能对指定的一个列表进行渲染,不能重用
  • 不能指定变色的起始位置,在处理表格的变色时,得专门写处理
  • 代码全在 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');

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

Table 2

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

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

Javascript 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
javascript常用函数(1)
Nov 04 #Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 #Javascript
jQuery多条件筛选如何实现
Nov 04 #Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 #Javascript
js数组去重的5种算法实现
Nov 04 #Javascript
解决js图片加载时出现404的问题
Nov 30 #Javascript
jquery实现的点击翻书效果代码
Nov 04 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python AES加密模块用法分析
2017/05/22 Python
Python hashlib模块加密过程解析
2019/11/05 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
keras之权重初始化方式
2020/05/21 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
职务说明书范文
2014/05/07 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
结婚通知短信大全
2015/04/17 职场文书
南京大屠杀观后感
2015/06/02 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python OpenCV超详细讲解基本功能
2022/04/02 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS