1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <style>
    9.         .first{
    10.             color: red;
    11.         }
    12.         .change{
    13.             width: 100px;
    14.             height: 60px;
    15.             line-height: 60px;
    16.             background-color: pink;
    17.             margin: 0 auto;
    18.             text-align: center;
    19.         }    
    20.     </style>
    21.     <body>
    23.         <div class="first">HelloWorld</div>
    25.         <script>
    27.             /*
    28.              * 使用element.style获得修改元素样式，如果样式较少或者功能简单的情况下使用.
    29.              * 可以使用className方法，鼠标一点击，就给div加上类名
    30.              * className会覆盖原来的类名
    31.              * 如果想要保留原来的类名，可以加个空格
    32.              */
    33.             var div=document.querySelector("div");
    34.             div.onclick=function(){
    35.                 div.className="first change";
    36.             }        
    37.         </script>
    38.     </body>
    39. </html>