<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0;
}
#box{
width: 100px;
height: 100px;
border: 5px solid black;
}
#zzc{
display: none;
}
#bg{
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
position: absolute;
top: 0;
}
.content{
width: 300px;
height: 200px;
background: #fff;
position: absolute;
left: 40%;
top: 30%;
}
.content p{
text-align: center;
padding: 7px;
}
span{
border: 3px solid black;
padding: 2px;
margin: 2px;
}
</style>
</head>
<body>
<p>
请为下面的div设置样式：<button id="btn" type="button">点击设置</button>
</p>
<div id="box"></div>
<div id="zzc">
<div id="bg"></div>
<div class="content">
<p>请准备背景颜色：
<span id="red">红</span>
<span id="yellow">黄</span>
<span id="blue">蓝</span>
</p>
<p>请设置宽度：
<span id="w200">200px</span>
<span id="w300">300px</span>
<span id="w400">400px</span>
</p>
<p>请设置高度：
<span id="h200">200px</span>
<span id="h300">300px</span>
<span id="h400">400px</span>
</p>
<p>
<span id="set">
重置
</span>
<span id="return">
返回
</span>
</p>
</div>
</div>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
var oZzc = document.getElementById('zzc');
var oRed = document.getElementById('red');
var oYellow = document.getElementById('yellow');
var oBlue = document.getElementById('blue');
var oW200 = document.getElementById('w200');
var oW300 = document.getElementById('w300');
var oW400 = document.getElementById('w400');
var oH200 = document.getElementById('h200');
var oH300 = document.getElementById('h300');
var oH400 = document.getElementById('h400');
var oSet = document.getElementById('set');
var oReturn = document.getElementById('return');
oBtn.onclick = function(){
oZzc.style.display="block";
}
oRed.onclick = function(){
oBox.style.background = "red";
}
oYellow.onclick = function(){
oBox.style.background = "yellow";
}
oBlue.onclick = function(){
oBox.style.background = "blue";
}
oW200.onclick = function(){
oBox.style.width = "200px";
}
oW300.onclick = function(){
oBox.style.width = "300px";
}
oW400.onclick = function(){
oBox.style.width = "400px";
}
oH200.onclick = function(){
oBox.style.height = "200px";
}
oH300.onclick = function(){
oBox.style.height = "300px";
}
oH400.onclick = function(){
oBox.style.height = "400px";
}
oReturn.onclick = function(){
oZzc.style.display="none";
}
oSet.onclick = function(){
oBox.style.background = "white";
oBox.style.width = "100px";
oBox.style.height = "100px";
}
</script>
</body>
</html>
网友评论