<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery操作CSS</title> <style> .demo{ background: rgba(255,0,0,0.7); width: 100px; height: 100px; margin-bottom: 30px; } .demo1{ border-radius: 50%; box-shadow:5px 6px 2px #000; } </style> </head> <body> <h1>css()/addClass()/removeClass()/toggleClass()/hasClass()</h1> <div class="box"> </div> <button id="btn1">addClass</button> <button id="btn2">removeClass</button> <button id="btn3">toggleClass</button> <button id="btn4">hasClass</button> <script src="js/jquery.js"></script> <script> $(function () { //addClass的用法 $('#btn1').on("click",function () { $(".box").addClass("demo demo1"); }); //removeClass的用法 $('#btn2').on("click",function () { $(".box").removeClass("demo demo1"); }); //toggleClass的用法 $('#btn3').on("click",function () { $(".box").toggleClass("demo demo1"); }); //判别删除 $('#btn4').on("click",function () { if($('.box').hasClass("demo demo1") == true){ $(".box").removeClass("demo demo1"); } else{ $(".box").addClass("demo demo1"); } }); }); </script> </body> </html>