1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 var $btn = $('#btn');
10 var $div1 = $('#div1');
11 // 绑定click事件
12 $btn.click(function(){
13 $div1.toggleClass('changecolor');
14 });
15 // $btn.hasClass('changecolor');判断是否有changecolor这样式，有返回true
16 });
17
18 </script>
19
20 <style type="text/css">
21 div{
22 width: 300px;
23 height: 300px;
24 line-height: 300px;
25 margin: 50px auto 0;
26 text-align: center;
27 }
28 .box{
29 background-color: gold;
30 }
31 .changecolor{
32 background-color: green;
33 }
34 </style>
35 </head>
36 <body>
37 <input type="button" name="" value="切换样式" id="btn">
38 <div class="box" id="div1">这是div元素</div>
39 </body>
40 </html>
