隔行变色
2019-05-07 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 隔行变色 </title>
<style>
.red {
background-color: red;
}
.pink {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul>
<script>
//找到所有的li
var liList = document.getElementsByTagName('li');
for (i = 0; i < liList.length; i++) {
if (i % 2 == 0) {
liList[i].className = "red";
} else {
liList[i].className = "pink";
}
// 添加鼠标移入/移出事件
liList[i].onmouseover = function () {
// 修改之前先用一个变量保存它原来的颜色
colour = this.style.backgroundColor;
// 谁触发事件，this就是谁
// 换句话说，移入谁了，this就是谁
// 谁移入就改谁的背景颜色
this.style.backgroundColor = " yellow "
}
liList[i].onmouseout = function () {
// 谁移出谁恢复颜色
this.style.backgroundColor = colour;
}
}
//预解析
var colour;
</script>
</body>
</html>
