Using the jQuery addClass() method adds one or more classes to the selected HTML elements.
This method does not replace a class, it simply adds the class, already be assigned to the elements.


Syntax:

$(“selector”).addClass(“className_to_add”);









Example how add classes to elements with onclick button function

code:


<!DOCTYPE html>
<html>
 <head>
  <title>IT PRESENT</title>
  <style>

.a {
background-image: url("images/silverplate.jpg");
}
.b {
-webkit-text-fill-color:maroon;
-webkit-text-stroke: 1px white;
}
.c {
color:blue;
font-family: Stencil Std, fantasy;
text-shadow: 3px 1px 0px red;
}
.d {
background-color:yellow;
}
  </style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 </head>
 
<body>

<div id="content">
   <h1>JQUERY EXAMPLE</h1>
   <h2>addClass() method</h2>
   <h3>Javascript Language</h3>

   <button>CLICK HERE</button>

</div>

<script>
$(document).ready(function(){
    $("button").click(function(){
         $("#content").addClass("a");
         $("h1").addClass("b");     
         $("h2").addClass("c");     
         $("h3").addClass("d");        
    });
});
</script>

 </body>
</html>

result:

JQUERY EXAMPLE

addClass() method
Javascript Language





JSFiddle






Privacy Policy