jQuery CSS Manipulation

jQuery CSS manipulation provides different method that is very useful for manipulation the HTML element's class property value.These methods are addClass(),removeClass() and toggleClass().

Let us see the use of these methods.

addClass(): It is useful for adding one or more classes to the selected HTML element without affecting the currently assigned classes to the HTML element.
removeClass(): It is used to remove the existing classes to the selected HTML element.
toggleClass(): It is used to add and removes the classes to the selected HTML element.

jQuery addClass() Method

jQuery addClass() method is very helpful for adding one or more than one classes to the selected HTML element.

Source Code

          
            $(document).ready(function () {
  $(".btn-effect").click(function () {
    $("h2").addClass("heading--text heading-color heading-bg-color");
    $("p").addClass("text--style");
  });
});

Try it now

jQuery removeClass() Method

jQuery removeClass() method is used to remove the assigned classes to the selected element.

Please keep in mind that it is used to remove a single class, multiple classes, or all classes at once from the selected elements.

Let us see a single class removing class example.

Source Code

          
            $(document).ready(function () {
  $(".btn-effect").click(function () {
    $("h2").removeClass("heading-bg-color");
    $("p").addClass("text--style");
  });
});

Try it now

To remove all the classes that are assigned to the selected element, just call removeClass() without passing an argument.

Source Code

          
            $(document).ready(function () {
  $(".btn-effect").click(function () {
    $("h2").removeClass();
    $("p").addClass("text--style");
  });
});

Try it now

jQuery toggleClass() Method

The jQuery toggleClass() is basically used to add or remove one or more classes from the selected HTML elements.

This function performs nice jobs for adding one or more classes to the selected HTML element.

It is also very helpful for removing one or more classes from the selected HTML element.

Let us see the example of adding more than one class to the selected element.

Source Code

          
            $(document).ready(function () {
  $(".btn-effect").click(function () {
    $("h2").toggleClass("heading--text heading-color heading-bg-color ");
    $("p").addClass("text--style");
  });
});

Try it now

Let's see the removal of CSS classes from the selected element using the toggleClass() method.

Source Code

          
            $(document).ready(function () {
  $(".btn-effect").click(function () {
    $("h2").addClass("heading--text");
    $("p").toggleClass("heading-bg-color");
  });
});

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4