JS排他思想-前端之路

最新推荐文章于 2023-10-24 17:55:40 发布

Artisan_C

最新推荐文章于 2023-10-24 17:55:40 发布

阅读量815

点赞数

文章标签： css javascript html css3 dom

本文链接：https://blog.csdn.net/m0_48486617/article/details/108532008

版权

排他思想

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

练习

实现功能就是点击对应的按钮来切换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
期待和你再次相遇
愿你学的愉快

在这里插入图片描述

Artisan_C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS排他思想-前端之路

排他思想干掉所有人包括自己复活自己练习实现功能就是点击对应的按钮来切换body的颜色背景然后在点击第一个按钮的时候使用排他思想第一个按钮的背景颜色变成黑色字体变成白色其他按钮样子还是默认样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="
复制链接

扫一扫