javascript点击切换背景颜色和背景大小

最新推荐文章于 2024-07-04 20:21:08 发布

大可&不必

最新推荐文章于 2024-07-04 20:21:08 发布

阅读量3.4k

点赞数 2

文章标签： javascript点击切换背景颜色和背景大小

本文链接：https://blog.csdn.net/style201904/article/details/90109973

版权

css

<style>
         .box{
             width: 800px;
             height: 600px;
             border: 1px solid gray;
             position: relative;
         }
         #wod{
             width: 200px;
             height: 200px;
             background-color: blue;
         }
         #content{
             position: absolute;
             top: 0;
             right: 0;
             width: 180px;
             height: 400px;
             background-color: aqua;
             border: 1px solid gray;
             display: none;
             text-align: center;
             float: right;
         }
         .yang{
             width: 80px;
             height: 20px;
             background-color: white;
             border: 1px solid gray;
             margin: 0 auto;
             margin-top: 20px;
             margin-bottom: 10px;
         }
         #bbt{
             position: absolute;
             top: 0;
             right: 0;
             font-size: 20px;
         }
        
    </style>


<body>
    <div class="box">
        <input type="button" id="bbt" value="点击显示div样式">
        <div id="wod">
                <div id="content">
                        <h2>大小</h2>
                        <p class="yang" id="ou">100*100</p>
                        <p class="yang" id="oy">200*200</p>
                        <h2>颜色</h2>
                        <p class="yang" id="oz">#ff0000</p>
                        <p class="yang" id="ol">#00ff00</p>
                        <input type="button" id="qr" value="确认">
                        <input type="button" id="qx" value="取消">
                    </div>
                </div>
            </div>
</body>


<script type="text/javascript">
    var bbt = document.getElementById('bbt');
    bbt.onclick = function(){
       content.style.display = "block";
      
    }
    var content = document.getElementById('content');
    
  var ou = document.getElementById('ou')
  ou.onclick = function(){
     wod.style.width = "200px";
     wod.style.height = "400px";
  }

 
  var qr = document.getElementById('qr');
  qr.onclick = function(){
       content.style.display='none';
    }
  var qx = document.getElementById('qx');
     qx.onclick = function(){
        wod.style.width='1px';
     }

 var oy = document.getElementById('oy')
  oy.onclick = function(){
     wod.style.width = "300px";
     wod.style.height = "300px";
    

  }
  var oz = document.getElementById('oz')
  oz.onclick = function(){
     
     wod.style.backgroundColor = "yellow";

  }
  var ol = document.getElementById('ol');
  ol.onclick = function(){
    
     wod.style.backgroundColor = "pink";

  }




   
</script>

在这里插入图片描述

大可&不必

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
javascript点击切换背景颜色和背景大小

css<style> .box{ width: 800px; height: 600px; border: 1px solid gray; position: relative; } #wod{ wid...
复制链接

扫一扫