JS排他思想-前端之路

最新推荐文章于 2022-10-13 10:58:46 发布

Artisan_C

最新推荐文章于 2022-10-13 10:58:46 发布

阅读量837

点赞数

文章标签： 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>