jQuery addClass() method

The jQuery addClass() method is used to add the class names to the selected elements. This is especially useful when you want to add styles to the existing elements on a page. For example, let’s say you want to change the font size and colour of the first paragraph. You can create a desired css style for that under a class name and assign the class name to the first paragraph using addClass() method.

jQuery addClass() Method Syntax

$(selector).addClass(classname)

Here classname is the class that you want to add to the selected element. You can specify more than one classes, separated by space.

$(selector).addClass(classname1 classname2 classname3...)

jQuery addClass() method example

In this example, we are adding a class big to the first paragraph using addClass() method. The addClass() method is used inside a button click function. When the button is clicked the class big is added to the first paragraph which add the styles defined in the big class.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("big");
  });
});
</script>
<style>
.big {
  font-size: 200%;
  color: green;
}
</style>
</head>
<body>
<title>jQuery addClass() example on BeginnersBook.com</title>
<h1>jQuery addClass Method Example</h1>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<button>Change font size and colour of first paragraph</button>

</body>
</html>

Before the button is clicked:
jQuery addClass() method
After the button is clicked:

Adding more than one classes using addClass() method

This example demonstrates how to add more than one classes to the html elements.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("big highlight");
  });
});
</script>
<style>
.big {
  font-size: 200%;
  color: green;
}
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<title>jQuery addClass() method - Adding more than one class</title>
<h1>Adding two classes using addClass() method.</h1>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<button>Highlight the first paragraph</button>

</body>
</html>

Output screen before the click event occurs:
jQuery Adding more than one classes using addClass() method
Output screen after the click event occurs:

jQuery addClass() method – Adding classes using a function

In this example, addClass() method is added using a function. This is useful, when you want to assign different styles to different elements and the classes are determined by the function. The classes determined by the function are assigned using the method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass(function(n){
      return "paragraph" + n;
    });
  });
});
</script>
<style>
.paragraph0 {
  color: green;
}
.paragraph1 {
  color: yellow;
}
</style>
</head>
<body>

<h1>H1 Heading</h1>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<button>Add classes using function</button>

</body>
</html>

Output screen before the click event occurs:
jQuery addClass() method
Output screen after the click event occurs: