效果图：
代码：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择你想要的样式</title>
<link href="css/select.css" rel="stylesheet"/>
</head>
<body>
<div class="all" id="all">
<div class="div1">请为下面的DIV设置样式:
<input type="button" value="点击设置" class="button" onclick="choose_style()"/>
</div>
<br />
<div class="div" id="div"></div>
<div class="div2" id="div2">
<ul>
<li>请选择背景色:
<div><input type="button" class="red" onclick="change_color(1)" value="红"/></div>
<div><input type="button" class="yellow" onclick="change_color(2)" value="黄"/></div>
<div><input type="button" class="blue" onclick="change_color(3)" value="蓝"/></div>
</dl>
</li>
<li>请选择宽(px):
<div><input type="button" class="width" onclick="change_width(1)" value="200"/></div>
<div><input type="button" class="width" onclick="change_width(2)" value="300"/></div>
<div><input type="button" class="width" onclick="change_width(3)" value="400"/></div>
</li>
<li>请选择高(px):
<div><input type="button" class="width" onclick="change_width(4)" value="200"/></div>
<div><input type="button" class="width" onclick="change_width(5)" value="300"/></div>
<div><input type="button" class="width" onclick="change_width(6)" value="400"/></div>
</li>
</ul>
<input type="button" onclick="reset()" value="恢复" class="button1"/>
<input type="button" onclick="sure()" value="确定" class="button1"/>
</div>
</div>
</body>
</html>
<script src="js/javas.js" type="text/javascript"></script>
js:
function choose_style(){
var select=document.getElementById('div2');
var background=document.getElementById('all');
select.style.display='block';
background.style.backgroundColor='#d3d3d3';
select.style.backgroundColor='white';
}
function change_color(num){
var div_self=document.getElementById('div');
if(num==1)
{
div_self.style.backgroundColor='red';
}
else if(num==2){
div_self.style.backgroundColor='yellow';
}
else {
div_self.style.backgroundColor='blue';
}
}
function change_width(num){
var div_self=document.getElementById('div');
if(num==1)
{
div_self.style.width='200px';
}
else if(num==2){
div_self.style.width='300px';
}
else if(num==3){
div_self.style.width='400px';
}
else if(num==4)
{
div_self.style.height='200px';
}
else if(num==5){
div_self.style.height='300px';
}
else if(num==6){
div_self.style.height='400px';
}
}
function sure(){
var select=document.getElementById('div2');
var background=document.getElementById('all');
select.style.display='none';
background.style.backgroundColor='white';
}
function reset(){
var div_self=document.getElementById('div');
div_self.style.width='100px';
div_self.style.height='100px';
div_self.style.backgroundColor='white';
}