点击按钮，div发生各种样式变化

最新推荐文章于 2024-08-18 12:57:03 发布

sunlizhen

最新推荐文章于 2024-08-18 12:57:03 发布

阅读量3.6k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/sunlizhen/article/details/69390189

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果为：点击每个button样式发生变化：变宽变高颜色发生变化隐藏出现；但是每次点击都会重置；

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script>
           function getStyle(elem,attr,val){
               elem.style[attr] = val;
           }
           window.onload = function(){
               var oDiv = document.getElementById("box");
               var oBtn = document.getElementsByTagName("button");
               var Attr = ["width","height","background","display","display"];
               var oVal = ["200px","200px","red","none","block"]
               for(var i = 0;i<oBtn.length;i++){
                   oBtn[i].index = i;
                   oBtn[i].onclick = function(){
                       oDiv.style.cssText = "";
                       getStyle(oDiv,Attr[this.index],oVal[this.index])
                   }
               }
           }
       </script>
   </head>
   <style>
       #box{width: 100px;height: 100px;background: #000;margin: 20px auto;}
       .main{width: 300px;margin: 0 auto;}
   </style>
   <body>
       <div class="main">
           <button>变宽</button>
           <button>变高</button>
           <button>变色</button>
           <button>隐藏</button>
           <button>重置</button>
           <div id="box"></div>
       </div>
   </body>
</html>

以上为javascript的效果；

本人对于js还属于菜鸟阶段，所以代码有点简单，望见谅！！