欢迎使用优快云-markdown编辑器

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 185 阅读

文章标签：

#javascript

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页控件样式的动态切换方法，通过修改按钮的class属性达到不同样式之间的快速转换，同时提供了具体的HTML和JavaScript代码示例。

    另外，当我们希望在一个页面实现不同控件的样式切换时，比如第一个控件有4种切换方式，第二种控件有3种切换方式，那么这就意味着我们需要实现4X3 = 12种不同的页面，这是繁琐而没有必要的。

    我们只需要一段简单的js代码就能实现这个功能，实现原理是当捕捉到type = "button"的按钮事件时，我们直接修改它的样式（通过class属性）。

    此外，如果想要实现按钮切换下页面文字的改变等效果，可以给每个控件设置一个display属性，通过在响应事件中修改它的显示/隐藏属性。也就是说，一开始，我们把所有的东西都画了出来，只不过没有显示出来而已。（当然，如果涉及到信息安全问题，这样“裸露”的写法是不可行的）

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                .btn1{  
      border:none;  
      height:3.5em;  
      background-color:#000000;  
      color:white;  
      font-size:1.2em;  
      margin-top:0.5em;  
      width:100%;  
      border-radius:1em;  
    }  
    .btn2{  
      border:none;  
      height:3.5em;  
      background-color:#3E8CD0;  
      color:white;  
      font-size:1.2em;  
      margin-top:0.5em;  
      width:100%;  
      border-radius:1em;  
    }  

        </style>
    </head>
    <body>
           <div id="main" style="margin:auto 0">  
                <!--四个按钮-->  
                <div style="margin-top:2em;" align="center">  
                  <div style="width:20%"><button id = "1" type = "button" class = "btn2"> 按钮1</button></div>  
                  <div style="width:20%"><button  id = "2" type = "button" class = "btn1"> 按钮2</button></div>  
                  <div style="width:20%"><button id = "3" type = "button" class = "btn1"> 按钮3</button></div>  
                  <div style="width:20%"><button id = "4" type ="button" class = "btn1"> 按钮4</button></div>  
                </div>  
        </div>  


        <script type="text/javascript">  
//左边按钮的点击事件  
    window.onload = function(){  
        var arr = document.getElementsByTagName('button');  
        for(var i = 0;i<arr.length;i++){  
            arr[i].onclick = function(){      
                //this是当前激活的按钮，在这里可以写对应的操作    
                if(this.className == 'btn1'){  
                    this.className = 'btn2';  
                    var name = this.id;  
                    var btn = document.getElementsByClassName('btn2');  
                    for(var j=0;j<btn.length;j++){  
                        if(btn[j].id!=name){  
                            btn[j].className = 'btn1';  
                        }  
                    }     
                }  
             }   
         }  
     }  
</script>  
    </body>
</html>