JavaScript高手之路：隔行异色效果
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高手之路：隔行异色效果相关的知识，希望对你有一定的参考价值。
上一章节我们使用原生JSS实现了全选、不选、反选效果，这一这章节我们来实现隔行异色效果，隔行异色的意思是某表格中奇数行和奇数行的颜色相同，偶数行和偶数行的颜色要相同，奇数行和偶数行的颜色不同，奇偶相间达到隔行异色的效果。
隔行异色的效果图如上，奇数行背景颜色为antiquewhite，偶数行背景颜色为aqua奇偶相间，当鼠标移动到某一行的时候，该行背景颜色变红，鼠标移除时恢复原来的颜色。
页面的html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行异色</title>
<style>
div
padding: 20px;
margin: 5px;
border: solid 1px #000;
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
页面的最初轮廓如此，存在11个div，每个div定义了对应的样式，控制div具有表格行的效果，但是这时候的每一行背景颜色还只是单调的透明色，接下来我们编写代码实现奇偶相间异色效果。
首先需要定义奇数行和偶数行以及当前选中行的背景颜色。
.odd
background-color: aqua;
.even
background-color: antiquewhite;
.active
background-color: red;
在css中定义了三个class的样式，每个class的样式只定义了背景颜色，现在我们来看看js代码怎么实现的。
var BgChange = function ()
this.aDiv = document.getElementsByTagName("div");
this.init = function()
for(var i = 0; i < this.aDiv.length; i++)
if(i%2 == 0) //偶数行
this.aDiv[i].className = "odd";
else //奇数行
this.aDiv[i].className = "even";
;
一如既往的，该BgChange类具有aDiv类成员属性，记录每一行div的节点，在init方法中循环遍历每一个div，如果当前行号除以2等于0，则赋值class为odd，否则class赋值为even。
接下来我们应该监听鼠标的移入和移除事件，当鼠标移入某一行时，背景颜色变为红色，移除时还原为原来的颜色,代码显示如下：
this.changeBgColor = function ()
oldClassName = "";
//循环遍历每一个div
for(var i = 0; i < this.aDiv.length; i++)
//给每一行注册鼠标移入事件
this.aDiv[i].onmouseover = function ()
oldClassName = this.className;
this.className = "active";
;
this.aDiv[i].onmouseout = function ()
this.className = oldClassName;
;
该方法中用了一个oldClassName来记录当前行的class，当鼠标移除厨房onmounseout事件的时候即可还原原来的颜色，完整的BgChange类代码如下：
var BgChange = function ()
this.aDiv = document.getElementsByTagName("div");
this.init = function()
for(var i = 0; i < this.aDiv.length; i++)
if(i%2 == 0) //偶数行
this.aDiv[i].className = "odd";
else //奇数行
this.aDiv[i].className = "even";
;
this.changeBgColor = function ()
oldClassName = "";
//循环遍历每一个div
for(var i = 0; i < this.aDiv.length; i++)
//给每一行注册鼠标移入事件
this.aDiv[i].onmouseover = function ()
oldClassName = this.className;
this.className = "active";
;
this.aDiv[i].onmouseout = function ()
this.className = oldClassName;
;
驱动代码如下：
window.onload = function ()
var bgChange = new BgChange();
bgChange.init();
bgChange.changeBgColor();
以上是关于JavaScript高手之路：隔行异色效果的主要内容，如果未能解决你的问题，请参考以下文章