改变网页背景色的一种思路

本文主要是介绍改变网页背景色的一种思路，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

随便写写啦，其实太简单啦，就当玩玩配色：
http://codepen.io/tianzi77/pen/GJPRYE

结构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样式：

        .bg{border: 2px solid #abcdef;border-radius: 10px;background:-webkit-linear-gradient(top left,pink,#fff);position: fixed;left: 40%;}#yellow {width: 20px;height: 20px;background: #cff9f5;border-radius: 50%;}#red {width: 20px;height: 20px;background: #f9a3c9;border-radius: 50%;}#green {width: 20px;height: 20px;background: #f5f89a;border-radius: 50%;}#blue {width: 20px;height: 20px;background: #86d1fc;border-radius: 50%;}#lanse{width: 20px;height: 20px;background: #abcdef;border-radius: 50%;}#orange{width: 20px;height: 20px;background: orange;border-radius: 50%;}#pink{width: 20px;height: 20px;background: pink;border-radius: 50%;}div {display: inline-block;margin: 10px;cursor: pointer;}

js控制改变颜色：

        window.onload = function () {var Y = document.getElementById('yellow');var R = document.getElementById('red');var G = document.getElementById('green');var B = document.getElementById('blue');var L=document.getElementById('lanse');var o=document.getElementById('orange');var P=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';}}

这篇关于改变网页背景色的一种思路的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---