JS排他思想-前端之路

排他思想

  • 干掉所有人包括自己
  • 复活自己

练习

实现功能就是 点击 对应的 按钮 来切换body的颜色背景 然后 在点击第一个按钮的时候 使用 排他思想 第一个按钮的背景颜色变成 黑色 字体变成白色 其他按钮样子还是 默认样式

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                .active {
                        background-color: #000;
                        color:#fff;
                }
        </style>
</head>
<body>
        <button>红色</button>
        <button>黄色</button>
        <button>绿色</button>

        <script>
                var buttonList = document.getElementsByTagName("button");

                var colorList = ["red","yellow","teal"];

                for( var i = 0; i < buttonList.length;i++){
                        buttonList[i].flge = i;
                        
                        buttonList[i].onclick = function (){
                                document.getElementsByTagName("body")[0].style.background = colorList[this.flge];
                                
                                // 干掉其他人
                                for(var j = 0; j<buttonList.length;j++){
                                buttonList[j].className=""
                                }

                                // 复活自己
                                this.className = "active";
                        }
                
                }
        </script>
</body>
</html>

所谓干掉所有人 也就是 将 所有的样式 都设置成为 默认的样子 也就是 让所有的按钮 类名 设置成 空

然后 获取 当前 点击的按钮 类名设置成为 active 这样 就可以 通过样式 添加 想要的效果

在这里插入图片描述

写给看到最后的你

朋友,感谢你看到了最后,新手报道,技术不成熟的地方请多多指点,感谢!

有问题可以私信我、大家一起交流 前端知识 以及 爬虫 python知识。

公众号:Linux下撸python
期待和你再次相遇
愿你学的愉快

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Artisan_C

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值