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>