js实现按钮改变背景颜色

最新推荐文章于 2023-04-18 11:16:23 发布

sweetllh

最新推荐文章于 2023-04-18 11:16:23 发布

阅读量1.2w

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/sweetllh/article/details/70256009

版权

javascript 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            width: 800px;
            margin-left: 20px;
            margin-top: 30px;
        }

        li{
            width: 800px;
            height: 50px;
            margin: 10px 0;
            list-style: none;
            border: 1px solid #f0f;
        }

        input{
            width: 100px;
            height: 40px;
            margin: 10px 20px 0;
            background: #f0f;
            border: none;
            outline: none;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <input type="button"  value="添加背景颜色"/><input type="button" value="取消背景颜色" />
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<!--<script type="text/javascript">
    (function(){
        var buttons = document.getElementsByTagName('input');
        var noteLies = document.querySelectorAll('li');
        buttons[0].onclick=function(){
            //迭代（遍历）数组
            for(i=0;i<noteLies.length;i++){
            //检查li属于哪种级别
                if (i%3==0){
                noteLies[i].style.background='#f00';
                }
                else if (i%3==1){
                noteLies[i].style.background='#f0f';
                }
                else if(i%3==2){
                noteLies[i].style.background='#ff0';
                }
            }
        }

        buttons[1].onclick=function(){
            //迭代（遍历）数组
            for(i=0;i<noteLies.length;i++){
            noteLies[i].style.background='';
            }
        }
    })()
</script>-->
<script type="text/javascript">

  //简化代码
  (function(){
        var buttons = document.getElementsByTagName('input');
        var noteLies = document.querySelectorAll('li');
        var bg = ['#f00','#f0f','#ff0',''];
        buttons[0].onclick=function(){
            //迭代（遍历）数组
            for(i=0;i<noteLies.length;i++){
            //检查li属于哪种级别
            noteLies[i].style.background=bg[i%3];
            }
        }
        buttons[1].onclick=function(){
            //迭代（遍历）数组
            for(i=0;i<noteLies.length;i++)
            noteLies[i].style.background=bg[bg.length-1];
        }   
    })()

</script>

</html>

效果图

点击添加背景颜色
这里写图片描述

点击取消背景颜色
这里写图片描述

sweetllh

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现按钮改变背景颜色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> *{ margin: 0; padding: 0; } ul{
复制链接

扫一扫