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