html颜色高度,在线即时显示CSS样式 改变DIV颜色宽高度大小实时预览特

Document

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;}

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

};

};

点击设置样式

选择背景

红

黄

蓝

选择宽度

100

200

300

选择高度

100

200

300