jQuery Introduction | Setting CSS Styles and Properties | Class Settings .addClass() .removeClass() .hasClass()

Tags:

Class Settings

An HTML element can have multiple class attribute values. jQuery provides several methods for easily handling the class attribute values of HTML elements. With these methods, CSS styles applied through the class attribute can be applied dynamically.

Method Description
.addClass() Adds the class passed as an argument to selected elements.
.removeClass() Removes the class passed as an argument from selected elements.
.toggleClass() Adds the class passed as an argument if the selected element does not have it, and removes it if that class has already been added.
.hasClass() Checks whether the class passed as an argument exists on the selected element.

Adding a Class Attribute with .addClass()

You can easily add a class attribute to an HTML element with the .addClass() method.

Syntax

$(selector).addClass(classname)

Example

$(function() {
    $("#btnAdd").on("click", function() {
        $("#one, #two").addClass("blue");
    });
});

Removing a Class Attribute with .removeClass()

You can easily remove a class from an HTML element with the .removeClass() method.

Syntax

$(selector).removeClass(classname)

Example

$(function() {
    $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <style>
    .blue {
        color: blue;
    }
  </style>
  <script>
    $(function() {
      $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
      });
    });
  </script>
</head>
<body>
    <h1>.removeClass() Class Removal</h1>
    <div id="one" class="blue">Press the button to remove the class.</div>
    <div id="two" class="blue">The text color changes to black.</div>
    <button id="btnRemove">Remove class</button>
</body>
</html>

Toggling a Class Attribute with .toggleClass()

You can use .toggleClass() to alternate between adding and removing a class from an HTML element.

Syntax

$(selector).toggleClass(classname)

Example

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

<!DOCTYPE html>
<html lang="en">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .toggleClass()</title>
    <script>
    $(function() {
        $("#btnToggle").on("click", function() {
          $("#one, #two").toggleClass("blue");
	      });
    });
    </script>
   <style>
    .blue {
        color: blue;
    }
    </style>
</head>
<body>
    <h1>Class toggle</h1>
    <div id="one">Press the button to alternate between adding and removing the class.</div>
    <div id="two">The text color changes alternately.</div>
  	<button id="btnToggle">Toggle class</button>
</body>
</html>

Checking Whether a Class Exists with .hasClass()

You can use .hasClass() to check whether an HTML element contains a class.

Syntax

$(selector).hasClass(classname)

Example

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

<!DOCTYPE html>
<html lang="en">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .hasClass()</title>
    <script>
    $(function() {
        $("#btn").on("click", function() {
            var result = $("#one").hasClass("blue");
            $("#two").html(result);
		});
    });
    </script>
   <style>
    .blue {
        color: blue;
    }
    </style>
</head>
<body>
    <h1>Class check</h1>
    <div id="one" class="blue">Press the button to check whether the class exists.</div>
    <div id="two"></div>
  	<button id="btn">Check class</button>
</body>
</html>