• 通过调色板来设置div的颜色宽度高度


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            #div-color{
                background-color: #ffff00;
                 100px;
                height: 100px;
            }
            .mid{
                 900px;
                margin: auto;
            }
    
            .center{
                 300px;
                height: 300px;
                margin: auto;
                border: 1px solid black;
            }
    
            .divmid{
                padding: 30px;
            }
           #div1 input{
                50px;
               height: 30px;
           }
        </style>
    
    </head>
    <body>
    
        <div style="margin: 20px">
            <span style="display: inline-block;padding: 15px">请点击设置div的样式</span>
            <input type="button" id="btn-setcolor" value="设置调色板"; style="display: inline-block; height: 30px ; 60px" />
            <div id="div-color">
            </div>
        </div>
    
        <div  id="mid" class="mid center " style="display: none">
            <div id="div1" class="divmid">
                <input type="button" value="绿色" id="green" style="background-color: green" onclick="change('green',null,null)"/>
                <input type="button" value="红色" id="red" style="background-color: red" onclick="change('red')" />
                <input type="button" value="蓝色" id="blue" style="background-color: blue "onclick="change('blue')"/>
            </div>
            <div id="div2" class="divmid">
                <span>宽度px:</span>
                <input type="button" value="200" id="width1" onclick="change(null,'200px')"/>
                <input type="button" value="300" id="width2" onclick="change(null,'300px')"/>
                <input type="button" value="400" id="width3" onclick="change(null,'400px')"/>
            </div>
            <div id="div3" class="divmid">
                <span>高度宽度px:</span>
                <input type="button" value="200" id="height1" onclick="change(null,null,'200px')"/>
                <input type="button" value="300" id="height2" onclick="change(null,null,'300px')"/>
                <input type="button" value="400" id="height3" onclick="change(null,null,'400px')"/>
            </div>
        </div>
    </body>
    
    <script>
        document.getElementById("btn-setcolor").onclick=showorhide;
        var flag =true;
        function showorhide () {
            if(flag){
                document.getElementById("mid").style.display = 'block';
                document.getElementById("btn-setcolor").value = "隐藏调色板";
                flag=false;
            }
            else{
                document.getElementById("mid").style.display = 'none';
                document.getElementById("btn-setcolor").value = "设置调色板";
                flag=true;
        }
    
        }
        function change(colornew,widthnew,heightnew){
            var divcolor=document.getElementById("div-color");
            if(colornew!=null || colornew!=undefined){
                divcolor.style.backgroundColor=colornew;
            }
            if(widthnew!=null || widthnew!=undefined){
                divcolor.style.width=widthnew;
            }
            if(heightnew!=null || heightnew!=undefined){
                divcolor.style.height=heightnew;
            }
        }
    
    </script>
    </html>
  • 相关阅读:
    java——对象学习笔记
    ORACLE中如何查看分区表信息
    postgresql相关系统表查询
    oracle系统表查询
    linux shell常用函数,ps
    文本文件合并
    nginx多版本PHP配置
    webuploader实现文件上传
    open abc.txt: The system cannot find the file specified
    PHP在线批量下载文件
  • 原文地址:https://www.cnblogs.com/bravolove/p/5538207.html
Copyright © 2020-2023  润新知