前端--实现隔行变色的两种方式

实现的效果：奇偶行的颜色不一样，并且鼠标移入变色，鼠标移开恢复原来的颜色

一、基本框架与样式

1、body 部分

<ul id = "box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
</ul>

2、美化上面的代码

/*去除默认样式*/
* {
    margin: 0;
    padding: 0;
}
/* 去除li前面默认的点；使宽度是整个屏幕的宽度（这里使用的单位是vw,即viewport width）；*/
 ul {
    list-style: none;
    width: 100vw;
}
/*设置li的高度；使文字水平垂直居中*/
ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

css实现

1、奇偶行颜色不一样

知识点： ：nth-child(n)选择器是去匹配他的父元素的第n个子元素。想要操作第几个，n就是几；

使用：nth-child(n)来实现奇偶行时n的取值有两种表示方法：

• 偶数行：2n 、even
• 奇数行：2n + 1 、odd

ul li:nth-child(2n) {
    background-color: cadetblue;
}

ul li:nth-child(2n +1) {
    background-color: burlywood;
}

2、鼠标移入变色

 ul li:hover {
    background-color: crimson;
}

js实现

1、获取想要操作的元素

var box = document.getElementById("box");
var list = document.getElementsByTagName("li");

2、实现奇偶行变色

for(var i = 0;i<list.length;i++){
    if(i%2==0){
        list[i].style.background = 'cadetblue';
    }else{
        list[i].style.background = 'burlywood';
    }
}

3、鼠标移入变色

/*这里用到了this，指的是当前的对象*/
list[i].onmouseover = function(){
    this.style.background = 'crimson';
}

4、鼠标移出恢复原来的颜色

/*因为js的加载方式是等所有的加载完以后才可以进行操作，因此，当去操作的时候，for循环早已经执行完成，所以需要记录每一个i的值，这样再操作的时候，操作那个就直接去找那个的值*/
list[i].color = list[i].style.background;
list[i].onmouseout = function(){
    this.style.background = this.color;
}

效果如图