jQuery - Get and Set CSS Classes

The style of element may be easily handled using jQuery.

You can also search for these topics, jquery get and set css class attribute and elements, get and set css class span and div, working of class html jquery get and set css, list out css classes, multiple css classes, check the existing of classes, add or remove the jquery get and set css class, width and height.

jQuery Manipulating CSS

jQuery offers several manipulation techniques for CSS. The following approaches will be examined :

  • addClass() - The selected items are adds one or more CSS classes.
  • removeClass() - Deletes one or more CSS classes from the components chosen.
  • toggleClass() - Add/delete the CSS classes from the chosen components.
  • css() - The style property is set or returned.

Example Stylesheet

All of the examples on this page will make use of the following stylesheet :

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
You can also search for these topics, how to manipulate css class in jquery, ways to modify css class definition, example.

jQuery addClass() and removeClass() Methods

The addClass() is used add or insert CSS classes to an specified or multiple HTML elements.

The removeClass() is used remove or delete CSS classes from an specified or multiple HTML elements.

Example:- This example illustrates how class attributes may be added or removed from/to various components. Of course, when you add classes, you can pick several elements :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {

            // Add single css class to one element

            $("#text1").addClass("textcolor");
            $("#text2").addClass("backcolor");

            // Add single css class to multiple element

            $("#text1, #text2, #text3").addClass("boldtext");

            // Add multiple css classes

            $("#text3").addClass("textcolor backcolor");
        });

        $("#b2").click(function () {

            // Remove single css class from one element

            $("#text1").removeClass("textcolor");
            $("#text2").removeClass("backcolor");

            // Remove single css class from multiple element

            $("#text1, #text2, #text3").removeClass("boldtext");

            // Remove multiple css classes

            $("#text3").removeClass("textcolor backcolor");
        });
    });
</script>

<style>
.boldtext {
  font-size: large;
}

.backcolor {
  background-color: orange;
}

.textcolor {
  color: blue;
}
</style>
</head>
<body>

<h4 id="text1">This is heading 1</h4><br />

<h4 id="text2">This is heading 2</h4><br />

<h4 id="text3">This is heading 3</h4><br />

<button id="b1">Add classes to elements</button><br /><br />
<button id="b2">Remove classes from elements</button>

</body>
</html>

Output :-

This is heading 1


This is heading 2


This is heading 3





You can also search for these topics, jquery addclass method multiple elements and variable, compare the jquery addclass method vs css, callback function in jquery addclass, on click method with jquery addclass, jquery hidden element used addclass method, example, jquery removeclass method attribute, working of hidden element in jquery removeclass method, example for jQuery removeClass() method, how to remove class attribute from different elements in jquery.

jQuery toggleClass() Method

The toggleClass() function is a combination of addClass() and removeClass().

Example :- The toggleClass() function in jQuery is demonstrated in the following example. This function allows you to add/remove classes from the items you've chosen :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b5").click(function () {
            $("#p1").toggleClass("makebold");
        });
    });
</script>

<style>
.makebold {
  color: blue;
  font-size: xx-large;
}
</style>
</head>
<body>

<p id="p1">This is a paragraph.</p>

<button id="b5">Toggle class</button>

</body>
</html>

Output :-

This is a paragraph.


You can also search for these topics, jquery toggleclass() animation, callback function used in jquery toggleclass, show the visibility, list the parameters, toggle class jquery example, how to toggleclass method execute between two elements and classes, multiple elements defined by jquery toggleclass method.