奔跑吧，小肥羊！

妙味课堂作业20160113 

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

 

posted @ 2016-01-13 15:23  xiayedexin  阅读(263)  评论(0)    收藏  举报