div的样式变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div的样式设置</title>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0 padding:0;}
ul,li{list-style:none;}
h2{font-weight:900;font-size:28px;}
.set_btn{border:none;width:100px;background:red;color:#fff;height:36px;line-height:36px;font-size:14px;margin-left:8px;}
#div1{width:100px;height:100px;background:red;border:5px solid #000;}
.main{position:absolute;width:320px;height:200px;left:50%;top:50%;margin-left:-160px;margin-top:-100px;border:20px solid #9c949c;color:#000;display:none;z-index:999;background:#fff;}
.main ul li{font-size:18px;line-height:36px;}
.main ul li a,.main ul li span{display:inline-block;width:38px;height:30px;line-height:30px;text-align:center;margin-right:5px;}
.main ul li a{color:#fff;text-decoration: none;}
.main ul li a#red{background:#9cce00;}
.main ul li a#yellow{background:#efbd00;}
.main ul li a#blue{background:#5a94ef;}
.main ul li span{border:1px solid #ccc;background:#efefef;font-size:14px;color:#333;}
.main .btn_oparete{text-align:center;}
.btn_oparete input{border:none;width:60px;height:32px;background:#002952;margin-right:5px;color:#fff;}
#blackgray{position:fixed;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:0.6;filter:alpha(opacity=60);}
</style>
}
}
</head>
<body>
<h2>请为下面的DIV设置样式:<input type="button" value="点击设置" id="set_btn" class="set_btn"></h2>
<div id="div1"></div>
<div class="main" id="main">
<ul>
<li>请选择背景色：<a href="javascript:" id="red">红</a><a href="javascript:" id="yellow">黄</a><a href="javascript:" id="blue">蓝</a></li>
<li>请选择宽(px)：<span id="w1">200</span><span id="w2">300</span><span id="w3">400</span></li>
<li>请选择高(px)：<span id="h1">200</span><span id="h2">300</span><span id="h3">400</span></li>
</ul>
<div class="btn_oparete"><input type="button" value="恢复" id="reset"><input type="button" value="确定" id="confirm"></div>
</div>
<div id="blackgray" style="display:none;"></div>
</body>
</html>
<script type="text/javascript">
window.onload=function (){
var oBtn1=document.getElementById("set_btn");
var oBtn2=document.getElementById("reset");
var oBtn3=document.getElementById("confirm");
var oBlack=document.getElementById("blackgray");
var oDiv=document.getElementById("div1");
var oMain=document.getElementById("main");
var c1=document.getElementById("red");
var c2=document.getElementById("yellow");
var c3=document.getElementById("blue");
var w1=document.getElementById("w1");
var w2=document.getElementById("w2");
var w3=document.getElementById("w3");
var h1=document.getElementById("h1");
var h2=document.getElementById("h2");
var h3=document.getElementById("h3");
oBtn1.onclick=function (){
oMain.style.display="block";
oBlack.style.display="block";
}
oBtn2.onclick=function(){
oDiv.style.background="red";
oDiv.style.width="100px";
oDiv.style.height="100px";
}
oBtn3.onclick=function(){
oMain.style.display="none";
oBlack.style.display="none";
}
c1.onclick=function(){
oDiv.style.background="red";
}
c2.onclick=function(){
oDiv.style.background="yellow";
}
c3.onclick=function(){
oDiv.style.background="blue";
}
w1.onclick=function(){
oDiv.style.width="200px";
}
w2.onclick=function(){
oDiv.style.width="300px";
}
w3.onclick=function(){
oDiv.style.width="400px";
}
h1.onclick=function(){
oDiv.style.height="200px";
}
h2.onclick=function(){
oDiv.style.height="300px";
}
h3.onclick=function(){
oDiv.style.height="400px";
}
}
</script>
