<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>2016011220160115</title>
<style>
#set_color{
display: inline-block;
width: 80px;
text-align: center;
background-color: red;
font-size: 16px;
padding: 10px 0;
color:white;
cursor: pointer;
}
#layer{
display: none;
}
#layer_bg{
background-color: black;
opacity: 0.2;
top:0;
left:0;
width: 100%;
height:100%;
position: fixed;
z-index: 10;
}
#layer_content{
width: 15%;
margin-left: 40%;
background-color: white;
opacity: 1;
padding: 20px;
z-index: 20;
position: absolute;
}
#target_div{
border: 5px solid #000;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<p><strong>请为下面的DIV设置样式：</strong><span id="set_color">点击设置</span></p>
<div id="target_div">
</div>
<div id="layer">
<div id="layer_bg">
</div>
<div id="layer_content">
<p>
<span>请选择背景色：</span>
<button value="红">红</button>
<button value="黄">黄</button>
<button value="蓝">蓝</button>
</p>
<p>
请选择宽（PX）：
<button value="200">200</button>
<button value="300">300</button>
<button value="400">400</button>
</p>
<p>
请选择高（PX）：
<button value="200">200</button>
<button value="300">300</button>
<button value="400">400</button>
</p>
<button value="恢复">恢复</button>
<button value="确定">确定</button>
</div>
</div>
<script type="text/javascript">
var btns = document.getElementsByTagName(‘button‘);
var tarDiv = document.getElementById(‘target_div‘);
var colors = [‘red‘,‘yellow‘,‘blue‘,‘200px‘,‘300px‘,‘400px‘];
for (var i = 0; i < btns.length - 1; i++) {
btns[i].onclick = function(i){
/********闭包的样例，破解闭包***********/
return function(){
if(i>=0 && i<=2){
tarDiv.style.background = colors[i];
}
else if(i>=3 && i<=5){
tarDiv.style.width = colors[i];
}
else if(i>=6 && i<=8){
tarDiv.style.height = colors[i-3];
}
};
}(i);
};
btns[9].onclick = function(){
tarDiv.style.background = ‘white‘;
tarDiv.style.width = ‘100px‘;
tarDiv.style.height = ‘100px‘;
}
btns[3].onmouseover = function(){
tarDiv.style.background = ‘#CC6666‘;
tarDiv.style.width = ‘200px‘;
}
btns[10].onclick = function(){
document.getElementById(‘layer‘).style.display = ‘none‘;
}
document.getElementById(‘set_color‘).onclick = function(){
document.getElementById(‘layer‘).style.display = ‘block‘;
};
</script>
</body>
</html>
时间： 2024-08-25 15:21:19