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 more than one class to the attribute of each element that has matched.

.addClass( classNames )

Type: Array

This syntax adds multiple classes to the attribute of each element that has matched.

.addClass( function )

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

You can add a function that returns more than one class or series of classes to the existing class name(s). Cialis http://valleyofthesunpharmacy.com/cialis/

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 sentence.</p>
    <p>This is the LAST sentence</p>

    <button>Add a class name to the 1st 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. Female Viagra http://www.healthfirstpharmacy.net/female-viagra.html

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>Header1: Starting of the paragraph</h1>
    <p class="intro">This is a sentence.</p>
    <p>This is also a sentence.</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 either add or delete more than one class 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 switched for each element in the matched set.

.toggleClass( className, state )

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

.toggleClass( classNames )

You can add an array of classes to be switched 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 switched in the class attribute of each element in the matched set. Again, the state will be a boolean value true if the class should be added and false if not.

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 sentence.</p>
    <p>This is also a sentence.</p>
    <p>Click the button below to understand 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!

Scripts Used on This Site

Learning jQuery