先来布局
<body>
<div class="div_main">
<div class="div_body01">
<div class="div_edit">
<span>宽度:</span>
<input id="e_width" type="text" name="宽度">
</div>
<div class="div_edit">
<span>高度:</span>
<input id="e_height" type="text" name="高度">
</div>
<div class="div_edit">
<span>背景色:</span>
<input id="e_back" type="text" name="背景色">
</div>
<div class="div_edit">
<span>边框:</span>
<input id="e_border" type="text" name="边框">
</div>
<div class="div_edit">
<span>圆角:</span>
<input id="e_radius" type="text" name="圆角">
</div>
<input id="btn_set" class="btn_set" type="button" name="设置" value="设置">
</div>
<div class="div_body02">
<div id="div_change" class="div_change"></div>
</div>
</div>
</body>
然后css文件
.div_main{
border: 1px solid black;
margin: 0px auto;
width: 1280px;
height: 640px;
}
.div_body01{
width: 399px;
height: 625px;
background: lightpink;
float: left;
padding-top: 15px;
border-right: 1px solid black;
}
.div_body02{
width: 880px;
height: 640px;
background: lightblue;
float: left;
}
.div_edit{
width: 300px;
height: 50px;
background: lightgreen;
margin: 15px auto 0px;
}
.btn_set{
margin: 15px auto;
display: block;
}
.div_change{
width: 50px;
height: 50px;
border: 1px solid black;
margin: 100px auto 0px;
}
然后动态调节
window.onload=function(){
var btn_set=document.getElementById('btn_set');
btn_set.onclick=function(){
var e_width =document.getElementById('e_width');
var e_height =document.getElementById('e_height');
var e_back =document.getElementById('e_back');
var e_border =document.getElementById('e_border');
var e_radius =document.getElementById('e_radius');
var value_width=e_width.value;
var value_height=e_height.value;
var value_back=e_back.value;
var value_border=e_border.value;
var value_radius=e_radius.value;
var box=document.getElementById('div_change');
box.style.width=value_width;
box.style.height=value_height;
box.style.background=value_back;
box.style.border=value_border;
box.style.borderRadius=value_radius;
}
}