小练习1：隔行变色

最新推荐文章于 2023-02-25 10:43:08 发布

Joe?

最新推荐文章于 2023-02-25 10:43:08 发布

阅读量209

点赞数

原文链接：https://juejin.im/post/5ba49f88e51d453df0441de4

版权

第一个小练习，练习JS中比较简单的隔行变色问题，隔行变色主要通过改变li的class名称来改变各行的css属性

        #div li.bg0{
            background: pink;
            color: burlywood;
        }
        #div li.bg1{
            background: orange;
            color: gray;
        }    
复制代码

HTML样式如下：

<body>
    <div id="div">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
复制代码

通过循环获取li标签的各个实例，这里可以通过for循环或者数组的forEach方法都可以实现上述要求,forEach方法如下：

    [].slice.call(oLis).forEach(function (item,index) {
        var n = index%2;
        item.className = "bg" + n;
    })
复制代码

for循环

    for (var i = 0; i < oLis.length; i++){
        var n = i%2;
        oLis[i].className = "bg" + n;
    }
复制代码

执行结果如下：

现在我们再在隔行变色的基础上增加一些鼠标划入（onmouseover）划出（onmouseout）的事件，使该样式在划入时变色,划出时变回原来的颜色
我们还需要定义两个li的class名和样式，为了保存划入时更改的颜色

        #div li.ch0{
            background: skyblue;
        }
        #div li.ch1{
            background: brown;
        }
复制代码

之后在循环体内添加划入划出事件

    [].slice.call(oLis).forEach(function (item,index) {
        var n = index%2;
        item.className = "bg" + n;
        item.onmouseover = function () {
            item.className = "ch" + n;
        }
        item.onmouseout = function () {
            item.className = "bg" + n;
        }
    })
复制代码

最后实现结果如下

JS完整代码如下：

    var oDiv = document.getElementById("div");
    var oLis = oDiv.getElementsByTagName("li");
    [].slice.call(oLis).forEach(function (item,index) {
        var n = index%2;
        item.className = "bg" + n;
        item.onmouseover = function () {
            item.className = "ch" + n;
        }
        item.onmouseout = function () {
            item.className = "bg" + n;
        }
    })
复制代码

转载于:https://juejin.im/post/5ba49f88e51d453df0441de4

Joe?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小练习1：隔行变色

第一个小练习，练习JS中比较简单的隔行变色问题，隔行变色主要通过改变li的class名称来改变各行的css属性 #div li.bg0{ background: pink; color: burlywood; } #div li.bg1{ background: orange...
复制链接

扫一扫