← Back to Chapters

jQuery CSS Class Methods

? jQuery CSS Class Methods

? Quick Overview

jQuery provides methods to add, remove, toggle, and check CSS classes of HTML elements dynamically.

? Key Concepts

  • addClass() – Adds one or more classes
  • removeClass() – Removes one or more classes
  • toggleClass() – Toggles class on/off
  • hasClass() – Checks class existence

? Syntax

? View Code Example 
// Basic jQuery class manipulation syntax
$(selector).addClass("className");
$(selector).removeClass("className");
$(selector).toggleClass("className");
$(selector).hasClass("className");

? Live Example

This is a box.

? Night Mode Example

This box can switch to night mode.
? View Code Example 
// Toggle night-mode class on button click
$('#toggleNightBtn').on('click', function () {
$('#nightBox').toggleClass('night-mode');
});

? Style Playground (Interactive)

Combine multiple classes to see how they interact:

Customize My Style!

? Explanation

  • addClass() adds styles without replacing existing ones
  • removeClass() removes specific styles
  • toggleClass() simplifies toggle logic
  • hasClass() returns true or false

✅ Tips & Best Practices

  • Always prefer CSS classes over inline styles
  • Use toggleClass() for clean UI logic
  • Keep class names semantic and reusable

? Try It Yourself

  • Toggle multiple classes at once
  • Create your own night mode UI
  • Highlight active menu items dynamically