基础选择分类 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>基础样式设置</title>  
<style>  
.clear{ clear: both }
#box{ width: 100px; height:100px; border:2px solid #ddd;}
.upbox_bg{ background: #000; opacity: 0.4; filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4; position: fixed; width: 100%; height: 100%;display: none;}
.upbox{background: #fff; width:300px; height: 200px; z-index: 1000; position:fixed; margin: -100px 0 0 -150px;  left: 50%; top: 50%; display: none;}
.upbox div a{ color: #fff; width: 30px; height: 30px;  text-align: center; display: block; line-height: 30px; float: left; margin-right: 20px;  }
.upbox div span{ float: left; }
a#red{ background: red; }
a#yellow{ background:yellow; }
a#blue{ background:blue; }

.upbox div a#w200 ,.upbox div a#w300 ,.upbox div a#w400 ,.upbox div a#h200,.upbox div a#h300,.upbox div a#h400{  border: 1px solid #666; color: #666; }
</style>  
</head>  
<script type="text/javascript" src="js/jquery-1.12.1.js"></script>  
<script type="text/javascript">  
   window.onload = function(){
    var oAa = document.getElementById('aa');
        oBtn1 = document.getElementById('btn1')
        oRed = document.getElementById('red');
        oYellow = document.getElementById('yellow');
        oBlue = document.getElementById('blue');
        oW200 = document.getElementById('w200');
        oW300 = document.getElementById('w300');
        oW400 = document.getElementById('w400');
        oH200 = document.getElementById('h200');
        oH300 = document.getElementById('h300');
        oH400 = document.getElementById('h400');
        oHf = document.getElementById('hf');
        oQd = document.getElementById('qd');
        oBox = document.getElementById('box');
        oUpbox_bg = document.getElementById('upbox_bg')
        oUpbox = document.getElementById('upbox')

    oBtn1.onclick = function(){
        oUpbox_bg.style.display = 'block'
        oUpbox.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'
    }

    oHf.onclick = function(){
        oBox.style.height = '100px'
        oBox.style.width = '100px'
        oBox.style.background = 'none'
    }

    oQd.onclick = function(){
        oUpbox_bg.style.display = 'none' 
        oUpbox.style.display = 'none' 
    }
   }
</script>  
<body>  

<!-- 弹框 -->
<div id="aa" style=" width: 100%; height: 100%;">
<div class="upbox_bg" id="upbox_bg"></div>
<div class="upbox" id="upbox">
        <div><span>请选择背景颜色：</span><a id="red" href="javascript:void(0)">红</a><a id="yellow" href="javascript:void(0)">黄</a><a id="blue" href="javascript:void(0)">蓝</a></div>
        <div><span>请选择宽度：</span><a id="w200" href="javascript:void(0)">200</a><a id="w300" href="javascript:void(0)">300</a><a id="w400" href="javascript:void(0)">400</a></div>
        <div><span>请选择高度：</span><a id="h200" href="javascript:void(0)">200</a><a id="h300" href="javascript:void(0)">300</a><a id="h400" href="javascript:void(0)">400</a></div>
        <div class="clear"></div>
        <input id="hf" type="button" name="" value="恢复"><input id="qd" type="button" name="" value="确定">
</div>
</div>
    为下面div设置样式：<input id="btn1" type="button" name="" value="点击设置">
    <div id="box"></div>
</body>  
</html>

 

posted @ 2017-10-27 15:49  小毛驴--  阅读(157)  评论(0)    收藏  举报