Write casually, in fact, too simple, just play the color:
Http://codepen.io/tianzi77/pen/GJPRYE
Structure HTML
<Div class="BG"> <Div ID="Yellow"></Div> <Div ID="Red"></Div> <Div ID="Green"></Div> <Div ID="Blue"></Div> <Div ID="Lanse"></Div> <Div ID="Orange"></Div> <Div ID="Pink"></Div> </Div>
CSS style:
. BG{ border: 2px solid #abcdef; Border-radius: tenpx; background:-webkit-linear-gradient (Top Left,pink, #fff); position: fixed; Left : %; } #yellow { width: + px; height: px; background: #cff9f5; Border-radius: %; } #red { width: + px; height: px; background: #f9a3c9; Border-radius: %; } #green { width: + px; height: px; background: #f5f89a; Border-radius: %; } #blue { width: + px; height: px; background: #86d1fc; Border-radius: %; } #lanse{ width: + px; height: px; background: #abcdef; Border-radius: %; } #orange{ width: + px; height: px; background: Orange; Border-radius: %; } #pink{ width: + px; height: px; background: pink; Border-radius: %; } Div { display: inline-block; margin: tenpx; cursor: pointer; }
JS Control change Color:
Window.onload = function () { varY = document.getElementById (' Yellow ');varR = document.getElementById (' Red ');varG = document.getElementById (' Green ');varB = document.getElementById (' Blue ');varL=document.getelementbyid (' Lanse ');varO=document.getelementbyid (' Orange ');varP=document.getelementbyid (' Pink '); Y.onclick = function () {Document.body.style.backgroundColor =' #cff9f5 '; } R.onclick = function () {Document.body.style.backgroundColor =' #f9a3c9 '; } G.onclick = function () {Document.body.style.backgroundColor =' #f5f89a '; } B.onclick = function () {Document.body.style.backgroundColor =' #86d1fc '; } L.onclick = function () {Document.body.style.backgroundColor =' #abcdef '; } O.onclick = function () {Document.body.style.backgroundColor =' Orange '; } P.onclick = function () {Document.body.style.backgroundColor =' Pink '; } }
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
A way to change the background color of web pages