使用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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
js选项卡的实现方法
Feb 09 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
js表达式与运算符简单操作示例
Feb 15 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删除记录操作代码
2008/06/07 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
JS实现滑动插件
2020/01/15 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
外贸会计专业自荐信
2014/06/22 职场文书
重点工程汇报材料
2014/08/27 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL