使用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 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
Vuex实现数据增加和删除功能
Nov 11 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单例模式
2014/11/25 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
javascript操作cookie
2017/01/17 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python 解析XML文件
2009/04/15 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
优秀部门获奖感言
2014/02/14 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
企业安全生产标语
2014/06/06 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
python turtle绘图
2022/05/04 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android