JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色

css 奇偶行变色是通过 li:nth(odd) 和 li:nth(even) 实现的，鼠标滑上改变颜色，离开恢复颜色是通过 :hover 实现的

首先搭一下基本结构

<ul id="main"><li>走在前方不迷路，迷路就去找麋鹿</li><li>走在前方不迷路，迷路就去找麋鹿</li><li>走在前方不迷路，迷路就去找麋鹿</li><li>走在前方不迷路，迷路就去找麋鹿</li>
</ul>
<script>var main = document.getElementById("main");var lst = main.getElementsByTagName("li");for (var i = 0; i < lst.length; i++) {var el = lst[i];if (i % 2 == 0) {el.style.background = "lightblue";} else {el.style.background = "lightgreen";}}
</script>

错误示范

在 for 循环里添加如下代码（添加在尾部）

这里希望 oldColor 保存每一个 li 鼠标滑上之前的颜色

var oldColor = el.style.background;
el.onmouseover = function () {// 鼠标滑上变色this.style.background = "green";
};
el.onmouseout = function () {// 鼠标离开之后恢复原色this.style.background = oldColor;
};

测试一下效果，发现出现如下问题：鼠标滑过，所有 li 都变成最后一行 li 的颜色

剖析一下问题所在

首先 for 循环会先执行一遍，并给每一个 li 添加鼠标滑上和离开事件，当鼠标滑上或离开时，此时 for 循环已经结束，此时调用的是每一个 li 已经添加上的事件。循环结束后 oldColor 已经变成最后一个 li 的颜色，所以触发离开事件更改的颜色永远是最后一个 li 的颜色，因此会出现如上问题

问题示范

与上面的问题，区别只在于奇偶行在赋值颜色时，是通过类添加的

<style>.color1 {background: lightblue;}.color2 {background: lightgreen;}
</style>
<script>var main = document.getElementById("main");var lst = main.getElementsByTagName("li");for (var i = 0; i < lst.length; i++) {if (i % 2 == 0) {lst[i].style.background = "lightblue";} else {lst[i].style.background = "lightgreen";}}
</script>

在 for 循环里添加如下代码（添加在尾部），发现这个效果是正常的

var oldColor = lst[i].style.background;
lst[i].onmouseover = function () {this.style.background = "green";
};
lst[i].onmouseout = function () {this.style.background = oldColor;
};

但是有一些问题

var oldColor = el.style.background 这个只能获取行内样式

但是如上代码是通过添加类的方法去设置 li 的颜色，使用 style 属性没办法获取，所以 oldColor 实际存储的是一个空字符串。因此，鼠标滑上实际上是给 li 添加行内式代码，鼠标离开后，把行内代码变为 “” 去掉，就相当于没添加效果，此时采用的是内嵌样式（也是就通过类名添加的样式）

正确方法

方法一：给 this 添加新属性

给每个 li 上添加一个 bgColor 属性，鼠标离开时，只需访问这个 bgColor 查到值，恢复原有颜色即可

// 鼠标滑上li的时候，改变那个li的背景颜色
lst[i].onmouseover = function () {// 把原有的颜色绑定上去this.bgColor = this.style.backgroundColor;this.style.background = "green";
};
// 鼠标离开的时候，恢复原有的颜色
lst[i].onmouseout = function () {this.style.background = this.bgColor;
};

方法二：闭包

手动添加一层作用域（用闭包形式），里面把鼠标事件赋值给 li 标签，被占用形成不销毁的作用域，x 是私有变量（形参），之后把私有变量 oldColor 存到闭包作用域中，当鼠标事件发生在 li 标签时，就会找到闭包作用域中的私有变量 oldColor

(function (x) {var oldColor = lst[x].style.background;lst[x].onmouseover = function () {this.style.background = "green";};lst[x].onmouseout = function () {this.style.background = oldColor;};
})(i);

方法三：let

其实跟方法二是一样的，原理在剖析处

在 for 循环里添加如下代码（添加在尾部），这里只需把 oldColor 前面的 var 改成 let 即可

let oldColor = lst[i].style.background;
lst[i].onmouseover = function () {this.style.background = "green";
};
lst[i].onmouseout = function () {this.style.background = oldColor;
};

接下来剖析一下这个为什么会成功

在 for 循环中，变量 oldColor 是用 var 声明的，在全局范围都有效，所以全局只有一个变量 oldColor。每一次循环，变量 oldColor 的值都发生改变。也就是说，所有 li 的鼠标离开事件绑定的颜色都是最后一个 li 的颜色。我们可以小试验验证一下

方法：在 for 循环外面添加 oldColor = "red" ，发现鼠标离开后所有 li 都变成红色，证明每一次循环 oldColor 被改变后，前面几次循环， li 离开事件绑定的颜色也都发生了改变

而 let 声明的 oldColor 只在本轮循环中有效，所以每一次循环的 oldColor 其实都是一个新的变量，因此所有 li 的鼠标离开事件绑定的颜色都是当前 li 的颜色，所以效果会成功

可以去 babel 网站，看一下 let 都做了什么

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>* {margin: 0;padding: 0;}body {background: darkturquoise;}ul {list-style: none;}#main {width: 500px;margin: auto;}#main li {height: 50px;line-height: 50px;text-align: center;}</style></head><body><ul id="main"><li>走在前方不迷路，迷路就去找麋鹿</li><li>走在前方不迷路，迷路就去找麋鹿</li><li>走在前方不迷路，迷路就去找麋鹿</li><li>走在前方不迷路，迷路就去找麋鹿</li></ul></body>
</html>
<script>var main = document.getElementById("main");var lst = main.getElementsByTagName("li");for (var i = 0; i < lst.length; i++) {var el = lst[i];if (i % 2 == 0) {el.style.background = "lightblue";} else {el.style.background = "lightgreen";}var oldColor = el.style.background;el.onmouseover = function () {this.bgColor = this.style.backgroundColor;this.style.background = "green";};el.onmouseout = function () {this.style.background = this.bgColor;};}
</script>

JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色相关推荐

jQuery:表格的奇偶行变色，jquery实例之表格隔一行
jQuery:表格的奇偶行变色<html> <head> <title>表格变色</title> <style type="text/c ...
php表单偶数变颜色,利用CSS3 nth-child()选择器实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
润乾——鼠标滑过改变行背景色
有背景色判断的报表设置鼠标滑过改变当前行颜色首先客户报表中用到了背景色的条件判断if(row()%2==0,-921103,-1)效果为然后修改,HTML事件为οnmοuseοver='chang ...
html鼠标文字渐变效果,JS实现文字链接感应鼠标淡入淡出改变颜色的方法
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法.分享给大家供大家参考.具体实现方法如下: JS实现文字链接感应鼠标淡入淡出改变颜色 startColor = "#671700& ...
php如何设鼠标经过颜色,jQuery实现鼠标滑过Div层背景变颜色的方法
本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: jQuery实现感应鼠标经过Div层变换图层背景颜色) .divbox{ height:300 ...
鼠标移入移出改变元素的背景颜色
鼠标移入移出改变元素的背景颜色首先:给div标签设置一个基本的样式, 让这个div元素垂直居中. 效果展示: 然后在script标签里面获取元素div, 将获取到的div赋值给div,然后输出到控 ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
CSS3的nth-child() 选择器，表格奇偶行变色
nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...
.GRIDVIEW奇偶行变色
//设置奇偶行不同颜色 this.advBandedGridView1.Appearance.OddRow.BackColor = Color.BurlyWood; // 设 ...

JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色

JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色

错误示范

问题示范

正确方法

方法一：给 this 添加新属性

方法二：闭包

方法三：let

完整代码

JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色相关推荐

最新文章

热门文章