<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body { background: #00b38a center no-repeat; overflow: hidden; color: white; font-family: "Microsoft YaHei";}
a { text-decoration: none; }
#container { position:relative; width: 500px; height: 600px; background: white; margin: 0 auto;}
#container .btn { display: block; height: 90px; width: 100%; background: #2D659F; color: white; font-size: 20px; line-height: 90px; text-align: center; font-weight: bold; }
#container #box { width: 150px; height: 150px; background: #00A881; border:2px solid #272822; position: absolute; top: 50%;left:50%; margin-top: -75px; margin-left: -75px; z-index: 99999;}
#change { position: absolute; top: 90px; left: 510px; display: block; width: 150px; height:370px; background: white; }
#change div { padding:10px;}
p { color: #000;}
#change button { display:inline-block; width: 40px; height: 40px; background: #F5F6F7; border:1px solid #D8D8D8; color: #00A881;}
#change button#red { background: red;}
#change button#yellow {background: yellow;}
#change button#blue {background: blue;}
</style>
<script>
window.onload = function (){
var bt1= document.getElementById(‘red‘);
var bt2= document.getElementById(‘yellow‘);
var bt3= document.getElementById(‘blue‘);
var box = document.getElementById(‘box‘);
bt1.onclick = function (){
box.style.background = "red";
};
bt2.onclick = function (){
box.style.background = "yellow";
};
bt3.onclick = function (){
box.style.background = "blue";
};
var wd_size1 = document.getElementById(‘wd1‘);
var wd_size2 = document.getElementById(‘wd2‘);
var wd_size3 = document.getElementById(‘wd3‘);
wd_size1.onclick = function(){
box.style.width = "100px";
box.style.marginLeft="-50px";
};
wd_size2.onclick = function(){
box.style.width = "200px";
box.style.marginLeft="-100px";
};
wd_size3.onclick = function(){
box.style.width = "300px";
box.style.marginLeft="-150px";
};
var hg_size1 = document.getElementById(‘hg1‘);
var hg_size2 = document.getElementById(‘hg2‘);
var hg_size3 = document.getElementById(‘hg3‘);
hg_size1.onclick = function(){
box.style.height = "100px";
box.style.marginTop="-50px";
};
hg_size2.onclick = function(){
box.style.height = "200px";
box.style.marginTop="-100px";
};
hg_size3.onclick = function(){
box.style.height = "300px";
box.style.marginTop="-150px";
};
};
</script>
</head>
<body>
<div id="container">
<a href="" class="btn">点击设置样式</a>
<div id="box"></div>
<div id="change">
<div class="bg">
<p>选择背景</p>
<button type="button" id="red">红</button>
<button type="button" id="yellow">黄</button>
<button type="button" id="blue">蓝</button>
</div>
<div class="wd">
<p>选择宽度</p>
<button id="wd1">100</button>
<button id="wd2">200</button>
<button id="wd3">300</button>
</div>
<div class="hg">
<p>选择高度</p>
<button id="hg1">100</button>
<button id="hg2">200</button>
<button id="hg3">300</button>
</div>
</div>
</div>
</body>
</html>