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

简介: 点击按钮,将奇数列的li背景色设置为红色,偶数列li背景色设置为绿色

点击按钮,将奇数列的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元素就会被交替地设置成红色和绿色,形成一种类似于条纹的效果。


相关文章
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
|
7月前
|
JavaScript
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
134 0
|
前端开发
input框点击时去掉默认的外层边框
input框点击时去掉默认的外层边框
84 0
select下拉框默认option为灰色,选中option颜色为白色
select下拉框默认option为灰色,选中option颜色为白色
182 0
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
111 0
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
220 0
textarea光标初始位置没有在最左上角的问题
textarea光标初始位置没有在最左上角的问题
设置按钮背景为透明去掉button按钮左右两边的留白
设置按钮背景为透明去掉button按钮左右两边的留白
|
移动开发 前端开发
H5页面,使用cursor: pointer;出现的问题:点击元素时,相邻元素或者自身背景色闪烁.
H5页面,使用cursor: pointer;出现的问题:点击元素时,相邻元素或者自身背景色闪烁.
104 0