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

Posted 2020-07-15 黑土白云

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过调色板来设置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>

以上是关于通过调色板来设置div的颜色宽度高度的主要内容，如果未能解决你的问题，请参考以下文章

CSS如何怎么设置div边框颜色宽度和高度？

JavaScript基础通过style属性设置div的高度，宽度，背景颜色

怎么js设置Img的宽度，和高度

div的边框宽度和边框颜色设置无效

如何根据 <div> 元素的高度或宽度更改其颜色？

颜色设置和调色板