按钮点击切换

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了按钮点击切换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

点击按钮样式切换

<!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>

 

按钮点击切换

 

总结


以上是前端之家为你收集整理的按钮点击切换全部内容,希望文章能够帮你解决按钮点击切换所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。