js实现模仿面板效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: #999;
			}
			#box{
				width: 100px;
				height: 300px;
				background: #008000;
				border: 1px solid #333;
			}
			.option{
				position: fixed;
				top: 50px;
				right: 40px;
				width: 130px;
				background: #fff;
				padding: 10px 20px 30px;
			}
			.option button{
				width: 60px;
			}
			
			.option>button{
				margin-top: 20px;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById('box');
				var dx01 = document.getElementById('dx01');
				var dx02 = document.getElementById('dx02');
				var dx03 = document.getElementById('dx03');
				var dx04 = document.getElementById('dx04');
				var ys01 = document.getElementById('ys01');
				var ys02 = document.getElementById('ys02');
				var ys03 = document.getElementById('ys03');
				var ys04 = document.getElementById('ys04');
				
				var btn = document.getElementById('btn');
				var rem = document.getElementById('rem');
				
				// 扩展 截取
				// console.log(dx01.innerHTML.substr(0,3));
				// console.log(dx01.innerHTML.substr(4,3) + 'px');
				
				
				var wi,he,bg;
				dx01.onclick = function(){
					wi = '300px';
					he = '300px';
					// console.log(wi,he);
				}
				dx02.onclick = function(){
					wi = '200px';
					he = '300px';
				}
				dx03.onclick = function(){
					wi = '300px';
					he = '200px';
				}
				dx04.onclick = function(){
					wi = '100px';
					he = '300px';
				}
				ys01.onclick = function(){
					bg = '#ff0000';
				}
				ys02.onclick = function(){
					bg = '#00ff00';
				}
				ys03.onclick = function(){
					bg = '#0000ff';
				}
				ys04.onclick = function(){
					bg = '#00ffff';
				}
				
				btn.onclick = function(){
					box.style.width = wi;
					box.style.height = he;
					box.style.background = bg;
				}
				// rem.onclick = function(){
				// 	box.style.width = '100px';
				// 	box.style.height = '300px';
				// 	box.style.background = '#008000';
				// }
				rem.onclick = function(){
					box.style.width = '';
					box.style.height = '';
					box.style.background = '';
					wi = he = bg = undefined;
				}
			}
		</script>
	</head>
	<body>
		<div class="wrap">
			<div id="box"></div>
			<div class="option">
				<div class="top">
					<h3>大小</h3>
					<button type="button" id="dx01">300*300</button>
					<button type="button" id="dx02">200*300</button>
					<button type="button" id="dx03">300*200</button>
					<button type="button" id="dx04">100*300</button>
				</div>
				<div class="bott">
					<h3>颜色</h3>
					<button type="button" id="ys01">#ff0000</button>
					<button type="button" id="ys02">#00ff00</button>
					<button type="button" id="ys03">#0000ff</button>
					<button type="button" id="ys04">#00ffff</button>
				</div>
				<button type="button" id="btn">确定</button>
				<button type="button" id="rem">取消</button>
			</div>
		</div>
	</body>
</html>