How to add and delete CSS classes with jQuery


In the previous lesson, readers read along with Taimienphi.vn to learn how to delete elements and attributes in jQuery. In the next lesson, Taimienphi.vn will teach you how to add and remove CSS classes with jQuery.


How to add and delete CSS classes with jQuery

In addition to methods for removing elements and properties, jQuery also includes methods for adding and removing CSS classes. Refer to the following jQuery lesson of Taimienphi.vn to learn how to add and remove CSS classes with jQuery.

Table of Contents:
1. How to add and delete CSS classes with jQuery
2. The addClass () method in jQuery
3. The removeClass () method in jQuery
4. The toggleClass () method in jQuery

1. How to add and delete CSS classes with jQuery

jQuery includes a number of methods like addClass (), removeClass (), toggleClass (), etc. to manipulate CSS classes assigned to HTML elements.

2. The addClass () method in jQuery

Method addClass () In jQuery it is used to add one or more classes to the selected elements.

For example: The following example illustrates how to add a class .page-header for the element h1 and class .highlight for the element p contains class .hint when clicking the button.

how to add and delete css bang jquery

The output will look like the following:

how to add and delete css bang jquery 2

In addition we can also add multiple classes to many different elements at once. Just specify a list of classes separated by spaces in the method addClass (), such as in the example below:

how to add and delete css bang jquery 3

The output will look like the following:

how to add and delete css bang jquery 4

3. The removeClass () method in jQuery

Similarly, we can use methods removeClass () in jQuery to remove classes from the element. The removeClass () method can delete a class, multiple layers, or all classes at once from selected elements.

For example: In the example below delete the class .page-header from the element h1, Class .hint and class .highlight from the element p When clicking the button:

how to add and delete css bang jquery 5

The output will look like the following:

how to add and delete css bang jquery 6

If the removeClass () method is called without arguments, it removes all classes from the selected elements, such as in the example below:

how to add and delete css bang jquery 7

The output will look like the following:

how to add and delete css bang jquery 8

4. The toggleClass () method in jQuery

Method toggleClass () In jQuery it is used to add or remove one or more classes from the selected element in such a way that if the selected element already has a class, the method will delete that class, otherwise if the element has no class then the method will Add class to that element.

For example: The following example illustrates how to use the toggleClass () method in jQuery to add or remove classes in the selected element:

how to add and delete css bang jquery 9

The output will look like the following:

how to add and delete css bang jquery 10

https://thuthuat.taimienphi.vn/cach-them-va-xoa-cac-lop-css-bang-jquery-52289n.aspx
The above lesson Taimienphi.vn has shown you how to add and remove CSS classes with jQuery. In the next lesson, Taimienphi.vn will guide you how to get and Set CSS properties using jQuery. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

.

Add a Comment

Your email address will not be published. Required fields are marked *