<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js热身运动课后练习</title>
<style>
<style>
body{margin:0 ;background-color:#efefef;}
a{text-decoration:none;font-size:12px;}
strong{font-size:24px;font-weight:bold;}
.show{width:100px;height:40px;background:red;color:#FFF;font-weight:bold;display:inline-block;line-height:40px;text-align:center;}
.top{margin:20px 0 0 25px;}
#box{width:100px;height:100px;border:4px solid #393129;margin:20px 0 0 25px;background:#fff}
#wrap{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filter:alpha(opacity=50);display:none;}
#box1{width:300px; height:200px; background:#fff; border:20px solid #9c949c; position:absolute;top:50%;left:50%; margin-top:-120px; margin-left:-170px;text-align:center;display:none;}
p{display:inline-block;font-size:12px;}
.list a{width:34px;height:30px;border:1px solid #c0c0c0;background:#efefef;line-height:30px;text-align:center;display:inline-block;margin-left:5px;font-weight:bold;color:#848c8c}
.btn input{width:60px;height:30px;border:none;background:#002952;color:#fff;font-weight:bold;line-height:30px;text-align:center;}
.btn{text-align:center;}
.btn,#list1{margin-top:16px;}
.list .red{border:none;background:#9cce00;color:#fff;}
.list .yellow{border:none;background:#efbd00;color:#fff;}
.list .blue{border:none;background:#5a94ef;color:#fff;}
</style>
<script>
window.onload = function (){
var obox = document.getElementById('box');
var obox1 = document.getElementById('box1')
var owrap = document.getElementById('wrap')
var oshow = document.getElementById('show')
var ored = document.getElementById('red')
var oyellow = document.getElementById('yellow')
var oblue = document.getElementById('blue')
var owidth1 = document.getElementById('width1')
var owidth2 = document.getElementById('width2')
var owidth3 = document.getElementById('width3')
var oheight1 = document.getElementById('height1')
var oheight2 = document.getElementById('height2')
var oheight3 = document.getElementById('height3')
var obtn1 = document.getElementById('btn1')
var obtn2 = document.getElementById('btn2')
oshow.onclick = function (){
owrap.style.display = 'block';
obox1.style.display = 'block';
}
ored.onmouseover = function (){
ored.style.background = 'red';
}
oyellow.onmouseover = function(){
oyellow.style.background = 'yellow';
}
oblue.onmouseover = function(){
oblue.style.background = 'blue';
}
ored.onmouseout = function(){
ored.style.background = '#9cce00';
}
oyellow.onmouseout = function(){
oyellow.style.background = '#efbd00';
}
oblue.onmouseout = function(){
oblue.style.background = '#5a94ef';
}
ored.onclick = function (){
obox.style.background = 'red';
}
oyellow.onclick = function (){
obox.style.background = 'yellow';
}
oblue.onclick = function (){
obox.style.background = 'blue';
}
owidth1.onmouseover = function (){
owidth1.style.background = '#ef9400';
}
owidth2.onmouseover = function(){
owidth2.style.background = '#ef9400';
}
owidth3.onmouseover = function(){
owidth3.style.background = '#ef9400';
}
owidth1.onmouseout = function(){
owidth1.style.background = '#efefef';
}
owidth2.onmouseout = function(){
owidth2.style.background = '#efefef';
}
owidth3.onmouseout = function(){
owidth3.style.background = '#efefef';
}
owidth1.onclick = function (){
obox.style.width = '200px';
}
owidth2.onclick = function (){
obox.style.width = '300px';
}
owidth3.onclick = function (){
obox.style.width = '400px';
}
oheight1.onmouseover = function (){
oheight1.style.background = '#ef9400';
}
oheight2.onmouseover = function(){
oheight2.style.background = '#ef9400';
}
oheight3.onmouseover = function(){
oheight3.style.background = '#ef9400';
}
oheight1.onmouseout = function(){
oheight1.style.background = '#efefef';
}
oheight2.onmouseout = function(){
oheight2.style.background = '#efefef';
}
oheight3.onmouseout = function(){
oheight3.style.background = '#efefef';
}
oheight1.onclick = function (){
obox.style.height = '200px';
}
oheight2.onclick = function (){
obox.style.height = '300px';
}
oheight3.onclick = function (){
obox.style.height = '400px';
}
obtn1.onclick = function(){
obox.style.background = '#fff';
obox.style.height = '100px';
obox.style.width = '100px';
}
obtn2.onclick = function(){
owrap.style.display = 'none';
obox1.style.display = 'none';
}
}
</script>
</head>
<body>
<div class="top">
<strong>请为下面标签设置样式:</strong>
<a id="show" class="show" href="#">点击设置</a>
</div>
<div id="box"></div>
<div id="wrap"></div>
<div id="box1">
<div id="list1"class="list">
<p>请选择背景颜色 :</p>
<a id="red" class="red" href="#">红</a>
<a id="yellow" class="yellow" href="#">黄</a>
<a id="blue" class="blue" href="#">蓝</a>
</div>
<div class="list">
<p>请选择宽（px）:</p>
<a id="width1" href="#">200</a>
<a id="width2" href="#">300</a>
<a id="width3" href="#">400</a>
</div>
<div class="list">
<p>请选择高（px）:</p>
<a id="height1" href="#">200</a>
<a id="height2" href="#">300</a>
<a id="height3" href="#">400</a>
</div>
<div class="btn">
<input id="btn1" type="button" value="恢复"/>
<input id="btn2" type="button" value="确定"/>
</div>
</div>
</body>
</html>
实现的效果图：
