Home > Developer > Web Develop
<! DOCTYPE html>
<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-heig ht: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: #0 0a881;}
#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>
<body>
<div id= "Container" >
<a href= "" class= "BTN" > click Set Style </a>
<div id= "box" ></div>
<div id= "Change" >
<div class= "BG" >
<p> Select Background </p>
<button type= "button" id= "Red" > Red </button>
<button type= "button" id= "Yellow" > Yellow </button>
<button type= "button" id= "Blue" > Blue </button>
</div>
<div class= "WD" >
<p> Select width </p>
<button id= "WD1" >100</button>
<button id= "Wd2" >200</button>
<button id= "WD3" >300</button>
</div>
<div class= "HG" >
<p> Select Height </p>
<button id= "HG1" >100</button>
<button id= "Hg2" >200</button>
<button id= "HG3" >300</button>
</div>
</div>
</div>
</body>
Online change of the div style color and high-width JS effect code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
