改變網頁背景色的一種思路

隨便寫寫啦，其實太簡單啦，就當玩玩配色：
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';
            }
        }