完成效果：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[js小练习]：DOM操作</title>
</head>
<body>
<div id="testField">
</div>
<div class="coverBg" id="coverBox">
<div class="selBox">
<dl>
<dt>选择颜色</dt>
<dd id="red" class="commonEle">红</dd>
<dd id="green" class="commonEle">绿</dd>
<dd id="blue" class="commonEle">蓝</dd>
</dl>
<dl>
<dt>定制尺寸</dt>
<dd class="comEle">
<label for="olength">输入长度值</label>
<input type="text" id="olength" name="length">
</dd>
<dd class="comEle">
<label for="owidth">输入宽度值</label>
<input type="text" id="owidth" name="width">
</dd>
</dl>
<dl class="btn-list">
<dd><button class="btnEle" id="offBtn" >取消</button></dd>
<dd><button class="btnEle btn-save" id="saveBtn">保存</button></dd>
</dl>
</div>
</div>
</body>
</html>
界面呈现：
*{
padding: 0;
margin:0;
}
body{
font-family: "microsoft yahei";
}
#testField{
120px;
height: 120px;
background-color: #333;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
}
.coverBg{ /*遮罩层*/
display: none;
position: fixed;
100%;
height: 100%;
background-color: rgba(0,0,0,.4);
}
.selBox{
200px;
height: 300px;
padding:10px;
font-size: 13px;
border-radius:3px;
background-color: rgba(255,255,255,.4);
position: absolute;
top: 0;
right: -350px;
bottom: 0;
left: 0;
margin:auto;
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
dl{
display: inline-block;
}
dl dt{
font-size: 13px;
font-weight: bold;
margin: 5px 0;
padding-bottom: 5px;
border-bottom: 1px solid #f7f7f7;
}
.commonEle{
display:inline-block;
50px;
height: 50px;
border-radius: 25px;
text-align: center;
line-height: 50px;
color:#fff;
float: left;
margin:5px 8px;
}
#red{
background-color: red;
}
#green{
background-color: green;
}
#blue{
background-color: blue;
}
.comEle {
margin: 10px;
}
.comEle input {
margin: 5px 0;
100%;
height: 24px;
border: 1px solid #999;
border-radius: 3px;
box-shadow: inset 0 0 3px rgba(0,0,0,.3);
}
.btn-list dd{
float: left;
}
.btnEle {
padding: 5px 25px;
border: 0;
outline: 0;
box-shadow: 0 1px 2px rgba(0,0,0,.075);
border-radius: 2px;
margin: 5px 11px;
color: #666;
}
.btn-save{
background-image: -webkit-gradient(linear, left top, left bottom, from(#e3262e), to(#ab171e));
background-image: -webkit-linear-gradient(#e3262e, #ab171e);
background-image: linear-gradient(#e3262e, #ab171e);
text-shadow: 0 -1px rgba(0, 0, 0, 0.11);
color: #fff;
}
JS部分：
var oField=document.getElementById('testField');
var oCover=document.getElementById('coverBox');
var oRed=document.getElementById('red');
var oGreen=document.getElementById('green');
var oBlue=document.getElementById('blue');
var olength=document.getElementById('olength');
var owidth=document.getElementById('owidth');
var oOffBtn=document.getElementById('offBtn');
var oSaveBtn=document.getElementById('saveBtn');
olength.oninput=function(){
var h_value=olength.value +"px";
oField.style.height=h_value;
}
owidth.oninput=function(){
var w_value=owidth.value +"px";
oField.style.width=w_value;
}
oField.onclick=function(){
oCover.style.display="block";
}
oRed.onclick=function(){
oField.style.backgroundColor="red";
}
oGreen.onclick=function(){
oField.style.backgroundColor="green";
}
oBlue.onclick=function(){
oField.style.backgroundColor="blue";
}
oOffBtn.onclick=function(){
oCover.style.display="none";
oField.style.height="120px";
oField.style.width="120px";
oField.style.backgroundColor="#333";
//取消的时候清空input数值
olength.value='';
owidth.value='';
}
oSaveBtn.onclick=function(){
oCover.style.display="none";
//保存的时候清空input数值
olength.value='';
owidth.value='';
}