1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <style>
    8.         div{
    9.             width: 300px;
    10.             height: 300px;
    11.             background-color: pink;
    12.         }
    13.     </style>
    14.     <body>
    16.         <div></div>
    18.         <script>
    19.             /*
    20.              * 注意：修改style样式操作，产生的是行内样式，CSS权重比较高
    21.              */
    23.       //获取事件源
    24.             var div=document.querySelector("div");
    26.       //注册事件，处理程序：点击div盒子，改变其样式
    27.             div.onclick=function(){
    28.                 this.style.backgroundColor="red";//点击div，改变颜色
    29.                 this.style.width="400px";//点击div，改变其宽度
    30.             }
    31.         </script>    
    32.     </body>
    33. </html>