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

来源：懂视网责编：小采时间：2020-11-27 21:45:06

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

使用JavaScript和CSS实现文本隔行换色的方法_javascript技巧:先来看一个简单的方法。在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页加载后通过 javascript 获取要变色的标签列表，执行如下代码： // 当文件加载时，执行代码。 window.onload = fu

推荐度：

点击下载本文 文档为doc格式

导读使用JavaScript和CSS实现文本隔行换色的方法_javascript技巧:先来看一个简单的方法。在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页加载后通过 javascript 获取要变色的标签列表，执行如下代码： // 当文件加载时，执行代码。 window.onload = fu

先来看一个简单的方法。
在 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; 
 }
}

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

2015114150851266.png (760×261)