隔行变色实现方法

397 阅读1分钟

##具体操作如下

    for (var i = 0; i < oLis.length; i++) {
        oLis[i].style.background = i % 2 ? 'blue' : 'red';
        olis[i].myindex = i;
        oLis[i].onmouseenter = function () {
            col = this.style.background;
            this.style.background = 'black'
        }
        oLis[i].onmouseleave = function () {
            this.style.background = col;
        }
        oLis[i].onclick = function () {
            alert(`我是第${this.myindex + 1}个li`)
        }
    }
    
第一步 我们需要获取到 body里面的li 给他一个对应的olis·
然后我们 i%2 得到的是偶数  偶数给他设置一个颜色,反之奇数,则设置另一种颜色
实现 隔行变色
最后是弹出提示效果
需要添加一个鼠标事件,我是第x行 或者第几个 li。
因为从索引0开始,所以需要+1 显示第一行