當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

基础选择分类

發布時間：2024/8/26 综合教程 35 生活家

生活随笔收集整理的這篇文章主要介紹了基础选择分类小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

總結

以上是生活随笔為你收集整理的基础选择分类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

基础