Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>addClass / removeClass / toggleClass / hasClass</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#box{width:140px;height:70px;border:1px solid #ccc} .hot{background:#ffccbc;border-color:#ff8a65}</style> </head> <body> <div id="box"></div> <p> <button id="add">addClass('hot')</button> <button id="remove">removeClass('hot')</button> <button id="toggle">toggleClass('hot')</button> <button id="check">hasClass('hot')</button> </p> <pre id="out"></pre> <script> $("#add").on("click", function(){ $("#box").addClass("hot"); }); $("#remove").on("click", function(){ $("#box").removeClass("hot"); }); $("#toggle").on("click", function(){ $("#box").toggleClass("hot"); }); $("#check").on("click", function(){ $("#out").text($("#box").hasClass("hot")); }); </script> </body> </html>
Output