1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>添加&删除&切换样式类型</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 div{ 12 width: 400px; 13 height: 400px; 14 background: url("source/images/off.png"); 15 background-size: 100% 100%; 16 } 17 button{ 18 width: 80px; 19 } 20 .active{ 21 background: url("source/images/on.png"); 22 background-size: 100% 100%; 23 } 24 25 26 </style> 27 </head> 28 <body> 29 <div ></div> 30 <br/> 31 <br/> 32 <br/> 33 34 <button id="off">开灯</button> 35 <button id="on">关灯</button> 36 <button id="auto">自动开关</button> 37 <script src="js/jquery-3.3.1.js"></script> 38 <script> 39 window.onload=function () { 40 $("#off").click(function () { 41 $("div").addClass("active") 42 }); 43 $("#on").click(function () { 44 $("div").removeClass("active"); 45 }) 46 $("#auto").click(function () { 47 $("div").toggleClass("active") 48 }) 49 } 50 51 </script> 52 </body> 53 </html>