前端--實現隔行變色的兩種方式

不要情緒發表於2020-02-04
前端

實現的效果：奇偶行的顏色不一樣，並且滑鼠移入變色，滑鼠移開恢復原來的顏色

一、基本框架與樣式

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;
}
複製程式碼

效果如圖

前端--實現隔行變色的兩種方式

相關文章