按钮点击切换

点击按钮样式切换

<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <link rel="" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./lib/vue-2.4.0.js"></script>
    <title>moban</title>

       <style>
        body,h1,h2,h3,h4,h5,h6,ul,ol,p,div{margin:0;font-weight:normal}
        ul,ol{padding:0;list-style:none;}
        a{text-decoration: none;}
        #box{
            width: 100px;
            height: 50px;
            margin: 50px auto;
            font-size: 14px;
            font-weight: bold;
            line-height: 50px;
            text-align: center;
            /* 指向变成小手 */
            cursor: pointer;
            /* 无法被选中 */
            user-select: none;
        }
        #box.pink{
            color: rgb(11, 29, 194);
            background-color: pink;
            border: 2px solid red;
        }
        #box.red{
            color: rgb(180, 218, 13);
            background-color: red;
            border: 2px solid blue;
        }
        #box.yellow{
            color: rgb(240, 20, 57);
            background-color: yellow;
            border: 2px solid hotpink;
        }



       </style>

</head>
<body>

   <div id="box" class="pink">按钮</div>



   <script>
       //获取标签节点权限
       let obox = document.getElementById("box"),
       //定义一个数组,包含标签的所有变化的名字
        Acolor = ["pink","red","yellow"],
        //定义一个变量,开始节点   
        i = 0

        //点击事件函数
        obox.onclick = function (){
            //变量的变化量
            i ++ ;
            //赋值运算模等于0,循环从0开始
            i %= 3;
        //标签从数组中循环更换名字
        obox.className = Acolor[ i ];
       }
   </script>

</body>
<!--
笔记区域




-->

</html>

 

 

posted @ 2021-01-03 00:38  小衣  阅读(145)  评论(0)  编辑  收藏  举报