完成效果：
演示地址：
HTML：
[js小练习]：DOM操作
- 选择颜色
- 红
- 绿
- 蓝
- 定制尺寸
界面呈现：
*{ padding: 0; margin:0; } body{ font-family: "microsoft yahei"; } #testField{ width: 120px; height: 120px; background-color: #333; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:auto; } .coverBg{ /*遮罩层*/ display: none; position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); } .selBox{ width: 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; width: 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; width: 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.οninput=function(){var h_value=olength.value +"px";oField.style.height=h_value; }owidth.οninput=function(){var w_value=owidth.value +"px";oField.style.width=w_value; }oField.οnclick=function(){oCover.style.display="block";}oRed.οnclick=function(){ oField.style.backgroundColor="red";}oGreen.οnclick=function(){ oField.style.backgroundColor="green";}oBlue.οnclick=function(){ oField.style.backgroundColor="blue";}oOffBtn.οnclick=function(){ oCover.style.display="none"; oField.style.height="120px"; oField.style.width="120px"; oField.style.backgroundColor="#333"; //取消的时候清空input数值 olength.value=''; owidth.value='';}oSaveBtn.οnclick=function(){ oCover.style.display="none"; //保存的时候清空input数值 olength.value=''; owidth.value='';}