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

末蓝、 2022-02-02 11:23 448阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220202/2393f460ac1b49409384c60aaff91ab2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，448人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS点击切换背景图

JS点击切换背景图有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2] [

古城微笑少年丶/ 2024年03月31日 15:36/ 0 赞/ 117 阅读

相关 JS点击文本框改变背景颜色

代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <

╰半夏微凉°/ 2022年12月17日 14:56/ 0 赞/ 279 阅读

相关 android 点击文字切换,Android 按钮点击切换背景，同时修改文字颜色

其实原理很简单，用到的是selector，用来设置android：background和android：textcolor属性，selector可以用来设置默认时候、点击时候的

àì夳堔傛蜴生んèń/ 2022年10月17日 11:24/ 0 赞/ 325 阅读

相关 JavaScript 实现简单的点击切换背景

<!DOCTYPE html> <html> <head> <title>点击换肤</title> <meta charset

ゝ一世哀愁。/ 2022年07月13日 05:47/ 0 赞/ 225 阅读

相关 jquery实现点击按钮变换背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

末蓝、/ 2022年05月27日 10:20/ 0 赞/ 349 阅读

相关 jquery 动态点击li标签切换背景颜色

废话不多讲老规矩先上图看效果： ![70][] <script type="text/javascript" src="/jquery/jquery.js"></s

清疚/ 2022年05月24日 07:47/ 0 赞/ 268 阅读

相关 js 循环点击事件改变背景颜色

老规矩先看效果: ![70][] 这里使用的ul li标签这里就不上代码了很简单下面就是重要部分： ![70 1][] 使用的js获取id下li标签的长度当然你也可使

绝地灬酷狼/ 2022年05月15日 01:08/ 0 赞/ 465 阅读

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

css <style> .box{ width: 800px; he

末蓝、/ 2022年02月02日 11:23/ 0 赞/ 449 阅读

相关 CSS Vue 切换背景颜色

原文演示及链接： [https://codepen.io/richardtallent/pen/yvpERW/][https_codepen.io_richardtallent

短命女/ 2022年01月30日 06:41/ 0 赞/ 341 阅读

相关 javascript点击这个元素给这个元素变背景颜色

var vipif = document.getElementsByClassName('vip-ify')[0].getElementsByTagName('li')

我会带着你远行/ 2022年01月24日 00:39/ 0 赞/ 303 阅读