<!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>