点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

终究是雾散

于 2023-03-27 17:35:02 发布

阅读量506

点赞数 1

分类专栏： js事件 js基础练习题文章标签： javascript html css

本文链接：https://blog.csdn.net/SongLiang02_/article/details/129799980

版权

js基础练习题同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

js事件

2 篇文章 0 订阅

订阅专栏

点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

CSS

<style>
    .red {
            background: red;
        }

        .green {
            background: green;
        }
        ul{
            list-style: none;
        }
</style>

HTML

<body>
    <button>点击按钮变色</button>
    <ul>
        <li>li+1</li>
        <li>li+2</li>
        <li>li+3</li>
        <li>li+4</li>
        <li>li+5</li>
    </ul>
</body>

JAVAscript

<script>
    //点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
    document.querySelector('button').onclick = function () {//找到页面上的button 添加点击事件

        var li = document.querySelectorAll('li');//用querySelectorAll得到所有的li
        for (var i = 0; i < li.length; i++) {//因为用querySelectorAll得到的是一个伪数组 所以需要for循环遍历
            if (i % 2 === 0) {//判断如果取余2等于0的话，就说明他是偶数
                li[i].setAttribute('class', 'green')//用setAttribute属性设置class为green
            }
            else {
                li[i].setAttribute('class', 'red')//用setAttribute属性设置class为red
            }
        }
    }
</script>

当页面上的button被点击时，将所有的li元素按照奇偶性分别设置不同的背景颜色。具体来说，对于所有的li元素，如果它们在列表中的位置是偶数，则将其class属性设置为'green'，并将背景色设置为绿色；如果它们在列表中的位置是奇数，则将其class属性设置为'red'，并将背景色设置为红色。这样，页面上的li元素就会被交替地设置成红色和绿色，形成一种类似于条纹的效果。

终究是雾散

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

当页面上的button被点击时，将所有的li元素按照奇偶性分别设置不同的背景颜色。具体来说，对于所有的li元素，如果它们在列表中的位置是偶数，则将其class属性设置为'green'，并将背景色设置为绿色；如果它们在列表中的位置是奇数，则将其class属性设置为'red'，并将背景色设置为红色。这样，页面上的li元素就会被交替地设置成红色和绿色，形成一种类似于条纹的效果。点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色。
复制链接

扫一扫