Changing "class" attribute via jQuery (addClass, removeClass, hasClass)

In jQuery methods that are adapted to work with classes: addClass , removeClass , hasClass . Of course, you can use the attr method to change classes, but it replaces all existing classes. Therefore, instead of attr , it is better to use methods that automatically calculate which classes already exist and add / remove necessary / unnecessary ones. Let's take them in order.

Adding a class (addClass)

Here is an example of adding a class using the addClass method . The name of the class is passed to this method as a parameter. The method automatically calculates whether the element has such a class and adds it if not already:

<div id="wolf"></div>
<script>
   $('#wolf').addClass('strong');
</script>

As you can see from the example, the "class" attribute does not yet exist on the "div" element. But after applying the "addClass" method, it will be created and the HTML code of the page will change to:

<div class="strong" id="wolf"></div>

Let's add a second class right away to demonstrate that existing classes are not overwritten, as happens when using attr :

<div class="strong" id="wolf"></div>
<script>
   $('#wolf').addClass('sharp');
</script>

When executing this code, the HTML code will be:

<div class="strong sharp" id="wolf"></div>

Removing a class (removeClass)

The "removeClass" method removes a certain class from an element, but leaves the rest. To demonstrate, let's take the HTML code from the previous example and try to remove a certain class:

<div class="strong sharp" id="wolf"></div>
<script>
   $('#wolf').removeClass('strong');
</script>

When executing this code, the HTML code will be:

<div class="sharp" id="wolf"></div>

Removed only one "cheese" class that was requested.

Toggle class on/off (toggleClass)

There is a "toggleClass" method that works like "addClass" and "removeClass" at the same time. If the class exists, then it will be removed. And if there is no class, then it will be added. This logic applies well to various toggle switches with two on/off positions. With this method, they are easy to program. Let's try the method in practice:

<div class="strong sharp" id="wolf"></div>
<script>
   $('#wolf').toggleClass('strong');
   $('#wolf').toggleClass('intelligence');
</script>

Since the "strong" class is already there, it will be removed. And the "intelligence" class will be added because it doesn't exist. When executing this code, the HTML code will be:

<div class="intelligence sharp" id="wolf"></div>

Checking for the existence of a class (hasClass)

The jQuery suite has several handy methods for working with classes. One of them is "hasClass", which returns "true" or "false" depending on whether the element has a class. This method is often used inside an "if" condition, so here's an example with it:

<div class="strong" id="wolf"></div>
<script>
   if( $('#wolf').hasClass('strong') ){
     // the condition will be true because the "strong" class is present
   }
   if( $('#wolf').hasClass('intelligence') ){
      // the condition will fail because there is no "intelligence" class
   }
</script>