在网页设计中，隔行换色的列表效果是一种常见的视觉增强技术，用于提高用户阅读体验。本篇将介绍如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现 `li` 列表元素的隔行换色效果。我们需要理解 CSS 的基本样式设置以及 JavaScript 如何操作 DOM（文档对象模型）中的元素。
1. **CSS 部分**：
CSS 用于定义元素的外观和布局。在这里，我们创建了一个类 `.mytable` 用于设置整个列表的样式，如边框、宽度等。接着，我们定义了 `li` 元素的一般样式，包括内边距、文本缩进、背景图像、边框样式、字体和颜色等。为了实现隔行换色，我们创建了三个不同的类：`.t1`, `.t2`, 和 `.t3`，分别代表三种不同的背景颜色。通过在 JavaScript 中交替应用这些类，我们可以实现隔行变色的效果。
示例 CSS 代码如下：
```css
.mytable {
border-collapse: collapse;
border: solid #6AA70B;
border-width: 0px 0 0 0px;
width: 50%;
}
.mytable ul li {
padding-top: 5px;
text-indent: 2em;
list-style: none;
background: url(/https/download.csdn.net/images/20110704/new_dot.gif) 3px 50% no-repeat;
border-bottom: #6AA70B 1px dotted;
font-family: "Verdana,宋体";
font-size: 12px;
color: #008000;
text-align: left;
height: 25px;
}
.mytable ul li.t1 {
background-color: #EFFEDD;
}
.mytable ul li.t2 {
background-color: #ffffff;
}
.mytable ul li.t3 {
background-color: #D2FCA0;
}
```
2. **JavaScript 部分**：
JavaScript 用于动态修改页面内容和样式。在这个例子中，我们需要遍历 `ul` 元素中的所有 `li` 子元素，并根据它们的位置（奇偶性）添加相应的类。首先获取 `id` 为 `tab` 的 `div` 元素，然后获取其子元素 `ul`。接下来，遍历 `ul` 中的所有 `li` 元素，并通过 `className` 属性切换类名。
示例 JavaScript 代码如下：
```javascript
window.onload = function() {
var tab = document.getElementById('tab');
var lis = tab.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
if (i % 3 == 0) {
lis[i].className = 't1';
} else if (i % 3 == 1) {
lis[i].className = 't2';
} else {
lis[i].className = 't3';
}
}
}
```
在这个示例中，我们使用了 `window.onload` 事件来确保在 DOM 加载完成后执行 JavaScript 代码。`getElementsByTagName` 方法用于获取指定标签名的所有元素，`className` 属性则用于设置或获取元素的类名。
通过结合 CSS 和 JavaScript，我们可以实现动态的隔行换色效果，使列表更加美观和易读。这个方法不仅适用于 `li` 列表，还可以应用于表格（`tr` 行）或其他需要隔行不同颜色的场景。同时，这种方法允许开发者通过修改 CSS 类来轻松改变颜色方案，以适应不同的设计需求。
