用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变

用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>文档标题</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #con{width:500px;height:500px;background:pink;border:1px solid #000;margin:100px auto;}
        #blue{background:blue;}
        #green{background:green;}
        #red{background:red;}
    </style>
</head>
<body>
    <div id="con">
        <button id="blue">蓝色</button>
        <button id="green">绿色</button>
        <button id="red">红色</button>
    </div>
</body>
</html>
<script type="text/javascript">
    var blue = document.getElementById('blue');
    var con = document.getElementById('con');
    blue.onclick = function(){
        con.style.background = 'blue';
    }

    var green = document.getElementById('green');
    green.onclick = function(){
        con.style.background = 'green';
    }

    var red = document.getElementById('red');
    red.onclick = function(){
        con.style.background = 'red';
    }
    </script>