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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #div-color{
            background-color: #ffff00;
            width: 100px;
            height: 100px;
        }
        .mid{
            width: 900px;
            margin: auto;
        }

        .center{
            width: 300px;
            height: 300px;
            margin: auto;
            border: 1px solid black;
        }

        .divmid{
            padding: 30px;
        }
       #div1 input{
           width: 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 ;width: 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>

 

posted @ 2016-05-28 19:58  黑土白云  阅读(210)  评论(0编辑  收藏  举报