<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>20160112</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; /*为什么不能用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‘);
btns[0].onclick = function(){
tarDiv.style.background = ‘red‘;
}
btns[1].onclick = function(){
tarDiv.style.background = ‘yellow‘;
}
btns[2].onclick = function(){
tarDiv.style.background = ‘blue‘;
}
btns[3].onclick = function(){
tarDiv.style.width = ‘200px‘;
}
btns[3].onmouseover = function(){
tarDiv.style.background = ‘#CC6666‘;
tarDiv.style.width = ‘200px‘;
}
btns[4].onclick = function(){
tarDiv.style.width = ‘300px‘;
}
btns[5].onclick = function(){
tarDiv.style.width = ‘400px‘;
}
btns[6].onclick = function(){
tarDiv.style.height = ‘200px‘;
}
btns[7].onclick = function(){
tarDiv.style.height = ‘300px‘;
}
btns[8].onclick = function(){
tarDiv.style.height = ‘400px‘;
}
btns[9].onclick = function(){
tarDiv.style.background = ‘white‘;
tarDiv.style.width = ‘100px‘;
tarDiv.style.height = ‘100px‘;
}
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-10-16 02:59:26