<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>奇偶行变色</title>
<link rel="icon" href="">
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 400;
}
ul {
list-style: none;
margin: 20px auto;
width: 1100px;
}
li {
line-height: 50px;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>许多人往往会在感情里犯同样的错误，总是一昧的追逐远方，忽略了眼前的幸福，心安理得的伤害着最亲近的人。</li>
<li>不要让那个喜欢你的人撕心裂肺地为你哭那么一次，因为你能把他伤害到那个样子的机会只有一次。</li>
<li>与爱共沉沦，无可救药地爱着一个人，那么固执自虐也糜烂的自己或许是美丽的</li>
<li>生命从来不是公平的，得到多少，便要靠那个多少做到最好，努力的生活下去</li>
<li>做有用的事，说勇敢的话，想美好的事，睡安稳的觉，把时间用在进步上，而不是抱怨上。</li>
<li>心态好的人，处处圆融，处处圆满。好的心态，能激发人生最大的潜能，是你最大的财富。</li>
</ul>
<script>
//实现奇偶行变色思路：
//1、获取要操作的元素（类数组）
var liList = document.getElementsByTagName("li");
//2、通过循环取出每一个li，判断是奇数行还是偶数行
for (var i = 0; i < liList.length; i++) {
if (i % 2) {
//偶数行
liList[i].style.backgroundColor = "red";
} else {
// 奇数行
liList[i].style.backgroundColor = "green";
}
/*给每一个li绑定鼠标滑入滑出事件*/
liList[i].onmouseover = function () {
//获取当前li的原颜色
var _color = this.style.backgroundColor;
this.style.backgroundColor = "pink";
this.onmouseout = function () {
this.style.backgroundColor = _color;
}
};
//把当前的i作为li的自定义属性
liList[i].index = i;
//给每一个li绑定点击事件
liList[i].onclick = function () {
alert("我是第" + (this.index + 1) + "行");
}
}
</script>
</body>
</html>
JS实现奇偶行变色
最新推荐文章于 2023-03-27 17:35:02 发布
1124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
