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