jQuery - CSS Classes

CSS classes are fundamental for styling HTML elements, and jQuery provides methods to manipulate classes dynamically.

1. Add Class

The addClass() method in jQuery is used to add one or more CSS classes to the selected elements.

Example:

// Add the 'highlight' class to all paragraphs
$("p").addClass("highlight");

This code adds the CSS class 'highlight' to all paragraph elements.

2. Remove Class

The removeClass() method in jQuery is used to remove one or more CSS classes from the selected elements.

Example:

// Remove the 'highlight' class from all paragraphs
$("p").removeClass("highlight");

This code removes the CSS class 'highlight' from all paragraph elements.

3. Toggle Class

The toggleClass() method in jQuery is used to toggle one or more CSS classes on the selected elements.

Example:

// Toggle the 'highlight' class on all paragraphs
$("p").toggleClass("highlight");

This code toggles the CSS class 'highlight' on all paragraph elements.

4. Conclusion

Manipulating CSS classes dynamically with jQuery allows developers to create interactive and responsive web applications. By using methods like addClass(), removeClass(), and toggleClass(), developers can easily control the styling of HTML elements based on user interactions and application logic.

Archive