1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title></title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       html,body{
    8.         width:590px;
    9.           height:590px;
    10.           margin:0px;
    11.       } 
    12.       #cont{
    13.         width:100%;
    14.         height:50px;
    15.         line-height:50px;
    16.       }
    17.       input{
    18.         background-color: #4CAF50; /* Green */
    19.         width:80px;
    20.         height:30px;
    21.         border: none;
    22.         color: white;
    23.         padding: 5px 5px;
    24.         text-align: center;
    25.         text-decoration: none;
    26.         display: inline-block;
    27.         font-size: 14px;
    28.         cursor:pointer;
    29.       }
    31.      /* 样式一 */
    32.       .styleOne{
    33.         background-color:#FF7F24;
    34.         width:300px;
    35.         height:400px;
    36.         border-radius:8px;
    37.       }
    38.       /* 样式二 */
    39.       .styleTwo{
    40.         background-color:#AFEABC;
    41.         width:400px;
    42.         height:500px;
    43.         border-radius:8px;
    44.       }
    45.     </style>
    46.     <script type="text/javascript">
    47.       function styleOne(){
    48.         document.getElementById("content").className="styleOne";
    49.       }
    50.       function styleTwo(){
    51.         document.getElementById("content").className="styleTwo"
    52.       }
    53.     </script>
    54.   </head>
    55.   <body>
    56.     <div id="cont">
    57.       <input type="button" value="样式一" id="btn1" onclick="styleOne()"/>
    58.       <input type="button" value="样式二" id="btn2" onclick="styleTwo()"/>
    59.     </div>
    60.     <div id="content"></div>
    61.   </body>
    62. </html>