<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#list li {
padding: 10px 4px;
border-top: 1px dashed #ccc;
}
#list a {
color: #333;
text-decoration: none;
}
#title{
margin: 10px 0;
text-align: center;
}
</style>
<script src="common.js"></script>
<script>
window.onload = function () {
var
oList = $('list');
aLi = oList.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
//添加索引
aLi[i].index = i;
aLi[i].style.backgroundColor = i % 2 ===0 ? '#eee' : '#fff';
//鼠标移入事件
aLi[i].onmouseover = function () {
this.style.backgroundColor = 'red';
}
//鼠标移出事件
aLi[i].onmouseout = function () {
this.style.backgroundColor = this.index % 2 === 0 ? '#eee' : '#fff';
}
}
}
</script>
</head>
<body>
<h2 id="title">邮箱列表</h2>
<ul id="list">
<li><a href="javascript:;">这是第1个li</a></li>
<li><a href="javascript:;">这是第2个li</a></li>
<li><a href="javascript:;">这是第3个li</a></li>
<li><a href="javascript:;">这是第4个li</a></li>
<li><a href="javascript:;">这是第5个li</a></li>
<li><a href="javascript:;">这是第6个li</a></li>
<li><a href="javascript:;">这是第7个li</a></li>
<li><a href="javascript:;">这是第8个li</a></li>
<li><a href="javascript:;">这是第9个li</a></li>
<li><a href="javascript:;">这是第10个li</a></li>
<li><a href="javascript:;">这是第11个li</a></li>
<li><a href="javascript:;">这是第12个li</a></li>
<li><a href="javascript:;">这是第13个li</a></li>
<li><a href="javascript:;">这是第14个li</a></li>
<li><a href="javascript:;">这是第15个li</a></li>
<li><a href="javascript:;">这是第16个li</a></li>
<li><a href="javascript:;">这是第17个li</a></li>
<li><a href="javascript:;">这是第18个li</a></li>
<li><a href="javascript:;">这是第19个li</a></li>
<li><a href="javascript:;">这是第20个li</a></li>
</ul>
</body>
</html>
用script实现隔行变色的效果(用来练习DOM相关知识)
猜你喜欢
转载自blog.csdn.net/weixin_41218855/article/details/90181484
今日推荐
周排行