生活随笔
收集整理的這篇文章主要介紹了
基础选择分类
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!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>基礎(chǔ)樣式設(shè)置</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>請(qǐng)選擇背景顏色：</span><a id="red" href="javascript:void(0)">紅</a><a id="yellow" href="javascript:void(0)">黃</a><a id="blue" href="javascript:void(0)">藍(lán)</a></div>
<div><span>請(qǐng)選擇寬度：</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>請(qǐng)選擇高度：</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="恢復(fù)"><input id="qd" type="button" name="" value="確定">
</div>
</div>
為下面div設(shè)置樣式：<input id="btn1" type="button" name="" value="點(diǎn)擊設(shè)置">
<div id="box"></div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的基础选择分类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
