<!DOCTYPE html> <html> <head> <title>jQuery addClass() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").addClass("color"); $("div").addClass("important"); $("#org_color").addClass("important orange-color"); }); }); </script> <style> .important {font-weight: bold; font-size: xx-large; } .color{color:#0099da;} .orange-color{ color:#F90;} .btn{ padding:6px 15px;} </style> </head> <body> <h1>www.freetimelearning.com</h1> <h2>www.freetimelearning.com</h2> <p>www.freetimelearning.com</p> <div>www.freetimelearning.com</div> <h3 id="org_color">www.freetimelearning.com</h3> <button type="button" class="btn">Click Here - addClass()</button> </body> </html>
Output :
Topic :
addClass() Method
