隔行变色

隔行变色：

.html：写一个ul标签，里面多放几个li，为了显示更好的效果

.css ：设置宽高，边距和边框，居中显示

.js　：获取所有的Li，通过标签名来获取元素集合；判断奇偶数，给背景设置不同的颜色

　　鼠标滑过变成高亮，onmouseover : 当鼠标划上这个元素时，触发这个函数；

　　鼠标滑出恢复原色，onmouseout : 当鼠标移出时，触发这个函数；

 

.css

<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tab{
width:500px;
height:500px;
margin:30px auto;
list-style: none;
}
#tab li{
width:100%;
height:40px;
text-align: center;
line-height: 40px;
border:1px dashed red;
}
</style>

.html

<ul id="tab">
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
<li>隔行变色</li>
</ul>

.js

<script>
// 获取所有的Li;
// 通过标签名来获取元素集合；
var oLis = document.getElementsByTagName("li");
//console.log(oLis);
//[{},{},{},{}...]
// onmouseover : 当鼠标划上这个元素时，触发这个函数；
// onmouseout : 当鼠标移出时，触发这个函数；
for(var i=0;i<oLis.length;i++){
if(i%2===0){
// 奇数行
oLis[i].style.background = "red";
}else{
oLis[i].style.background = "blue"
}
// 新增一个自定义属性；
oLis[i].bg = oLis[i].style.background;
oLis[i].onmouseover = function () {
// 当鼠标滑上执行
// i =10: 当函数执行时，for循环早已经循环完成；i变成10；
// console.log(i);// 10;
// this --> 函数中的this代表被绑定这个元素；
console.log(this);
this.style.background = "yellow";
}
oLis[i].onmouseout = function () {
this.style.background = this.bg;
}
}
console.log(i);
// 鼠标滑过变高亮；
</script>