HTML n种方式实现隔行变色的示例代码

//        这些方式存在优先级的问题:行内，ID，样式类，标签...
           
        // 方案：
        //    1.依次遍历每一个li，通过索引除以3取余数，让当前的li有不同的背景色
        //    2.第一种的技巧，告别一个个的判断，直接采用数组或者直接找到对应的样式的方式来完成
        //    3.不是遍历每一个li，而是遍历每一组
        var oBox = document.getElementById('box');
        var ulList = oBox.getElementsByTagName('li');
        //*高亮第3种方式：
        for (var i=0; i<ulList.length; i++){
                        ulList[i].className = 'bg'+ (i%3);
                        //=>鼠标滑过：在原有样式类基础上累加一个hover样式类（由于hover在样式类中靠后，它的样式会覆盖原有的bg中的样式）
                        //=>鼠标离开：把新增的hover样式类移除掉即可
                        ulList[i].onmouseover = function (){
                            this.className += 'hover'
                        }
                        ulList[i].onmouseout = function (){
                           // this.className = 'bg0 hover'- 'hover';这不是字符串相减，这是数学运算结果是（NaN）
                            this.className = this.className.replace('hover','');
                        }
                    }
        //=>2.js第一种方式
                // for (var i = 0; i < ulList.length; i++) {
                //     //=> 分析：i=0 第一个li i%3=0
                //     //=> i=1 第一个li i%3=1
                //     //=>  i=2 第一个li i%3=2
                //     //=>  i=3 第一个li i%3=0
                //     var n=i%3; //当前循环找出来的那个li
                //     liColor=ulList[i];
                    // if(n===0){
                    //     liColor.style.backgroundColor='red';
                    // }else if(n===1){
                    //     liColor.style.backgroundColor='yellow';
                    // }else {
                    //     liColor.style.backgroundColor='pink';
                    // }
                    // }

（编辑：广西网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!