正文

es6初级之箭头函数实现隔行变色

IP云
IP云V管理员/4 阅读
10/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

无论是使用哪种方式实现隔行变色的效果，它的思路都是一样的：

1.定义很多个div

2.给div 加背景

3.鼠标移动到div上时，当前div 背景变色

4.鼠标移出div时，当前div背景恢复

以上4点就是隔行变色的思路流程，任何形式的实现方式，都要依照以上的思路来，否则将不会达到效果-----这是本质。因为经常会弄反，写着写着就忘记之前要干什么事了，所以此处写出来，当做提示信息

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
border: 1px solid #000;
margin: 10px;
border: 1px solid #000;
height: 10px;
padding: 10px;
}
.even-color {
background: #eee;
}
.odd-color {
background: #ccc;
}
.active {
background: red;
}
</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>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

js 常规实现方式（es5）:

window.onload = function() {
var adiv = document.querySelectorAll("div");
var oldColor = '';
adiv.forEach(function(ele, index) {
ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';
});
adiv.forEach(function(ele, index) {
ele.onmouseover = function() {
oldColor = this.className;
this.className = 'active';
}
ele.onmouseout = function() {
this.className = oldColor;
}
});
}

js  es6实现方式：

window.onload = function() {
let adiv = document.querySelectorAll("div");
let oldColor = '';
adiv.forEach((ele, index) => {
ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';
});
adiv.forEach((ele, index) => {
ele.onmouseover = () => {
oldColor = ele.className;
ele.className = 'active';
};
ele.onmouseout = () => {
ele.className = oldColor;
}
});
};

js es6 及html5    ele.classList.add()  & ele.classList.remove()  方法实现：

window.onload = function() {
let adiv = document.querySelectorAll("div");
let oldColor = '';
adiv.forEach((ele, index) => {
ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';
});
adiv.forEach((ele, index) => {
ele.onmouseover = () => {
ele.classList.add('active');
};
ele.onmouseout = () => {
ele.classList.remove('active');
}
});
}

运行结果都是相同的：