How To Add Class Names In jQuery?

To add one or more class names to the selected element, the addClass() method is used. It is only used to ADD one or more class names to the class attributes and not remove existing class attributes. It adds a specified class to each element from the selected elements.

jQuery addClass()

Syntax: (According to the official website)

.addClass( className )

Type: String

With this syntax, you can add one or more space-separated classes to the class attribute of each matched element.

.addClass( classNames )

Type: Array

This syntax adds an array of classes to the class attribute of each matched element.

.addClass( function )

Type: Function( Integer index, String currentClassName )
=> String

You can add a function that returns one or more space-separated classes or an array of classes to the existing class name(s).

Now that we've seen some of the syntaxes to add class names, let us look at an example for a better understanding:

<html>
  <head>
    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>

    <script>
      $(document).ready(function(){
      $("button").click(function(){
      $("p:last").addClass("intro");
      });
      });
    </script>

    <style>
    .intro {
    font-size: 200%;
    color: green;
    }
    </style>
  </head>

  <body>
    <h1>This is a heading</h1>

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

    <button>Add a class name to the first p element</button>

  </body>
</html>

Let us now see the jQuery hasClass() syntaxes.

jQuery hasClass()

To know whether the elements with specified class name exists or not hasClass() is used. It helps in knowing if any of the matched elements are assigned to the given class.

Syntax ( According to the official website)

.hasClass( className )

Type: String

Here, you add the className you are searching for.

Let us see an example:

<html>
  <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    alert($("p").hasClass("intro"));
    });
    });
    </script>

    <style>
    .intro {
    font-size: 200%;
    color: green;
    }
    </style>
  </head>

  <body>

    <h1>This is a heading</h1>
    <p class="intro">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Does any p element have an "intro" class?</button>

  </body>
</html>

jQuery toggleClass()

Let's move on to the jQuery toggleClass(). If you want to add or remove one or more classes from the selected elements, toggleClass() is used. If the specified class is not present, toggleClass() adds it. If the specified class is already present, toggleClass() removes it.

If you use the switch parameter with toggleClass() you can decide to either only add the specified class or remove the specified class.

Syntax (According to the official website):

.toggleClass( className )

Type: String

Here, add one or more classes (separated by spaces) that are to be toggled for each element in the matched set.

.toggleClass( className, state )

For this syntax, the className type will be string, and the type for state will be boolean. Similar to the above syntax, you can add one or more classes (separated by spaces) that are to be toggled for each element in the matched set. For the state, add a boolean value to determine whether the class should be added or removed.

.toggleClass( classNames )

You can add an array of classes to be toggled for each element in the matched set as an attribute.

.toggleClass( classNames, state )

This is similar to the above code, where the classes are string type and state is a boolean value.

.toggleClass( function [, state ] )

Type: Function( Integer index, String className, Boolean state ) => String

Thus, you can add a function that returns one or more space-separated classes or an array of classes to be toggled in the class attribute of each element in the matched set. Again, the state will be a boolean value to determine whether the class should be added or removed.

To understand these codes better, let us take an example:

<html>
  <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("p").toggleClass("main");
    });
    });
    </script>
    <style>
    .main {
    font-size: 200%;
    color: green;
    }
    </style>
  </head>
  <body>

    <button>Toggle class "main" for p elements</button>
    <p>This is a paragraph.</p>
    <p>This is also a paragraph.</p>
    <p>Click the button more than once to see the toggle effect.</p>

  </body>
</html>

Conclusion

addClass(), hasClass() and toggleClass() are pre-defined methods in jQuery that can be used to manipulate class of the selected elements. addClass() is used to add one or more class names to the selected element. hasClass() is used to know whether the elements with specified class name exists or not. toggleClass is used to add or remove one or more classes from the selected elements.

To start learning jQuery from the beginning, visit our previous blog! To keep enjoying such tutorials, subscribe to our blog!