使用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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
js实现拖拽效果
Feb 12 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
vuex与组件联合使用的方法
May 10 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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 Undefined index的问题
2009/06/01 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
keras中的History对象用法
2020/06/19 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
大学生职业规划书的范本
2014/02/18 职场文书
英文推荐信格式范文
2014/05/09 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
母亲节感言
2015/08/03 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技