jQuery CSS Classes

jQuery - Manipulating CSS Classes

jQuery makes it easy to dynamically add, remove, or toggle CSS classes on elements, allowing for style changes and interactions based on pre-defined CSS rules.

jQuery Methods for Class Manipulation

jQuery provides several helpful methods for working with CSS classes:

• addClass(className | function): Adds one or more specified classes to the selected elements.
• removeClass(className | function): Removes one or more specified classes from the selected elements.
• toggleClass(className | function, [switch]): Toggles between adding and removing one or more classes. Can optionally accept a boolean switch to force adding (true) or removing (false).
• hasClass(className): Checks if any of the selected elements have the specified class. Returns true or false.

There’s also the css() method for directly getting or setting specific CSS style properties, covered in a separate section.

Example Stylesheet

The following CSS rules will be used in the examples:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.text-large {
  font-size: 1.5em;
}

.text-blue {
  color: blue;
}

.hidden {
    display: none;
}

jQuery addClass() Method

Use addClass() to apply styles defined in your CSS classes to elements.

Example: Adding single and multiple classes:

// Assumes HTML with <p> elements and a <div id='main-content'>

$("#highlightBtn").click(function() {
  // Add 'highlight' class to all paragraphs
  $("p").addClass("highlight");
});

$("#styleDivBtn").click(function() {
  // Add multiple classes (space-separated) to the div
  $("#main-content").addClass("text-large text-blue");
});

You can also use a function to determine which class(es) to add based on element index or existing classes.

jQuery removeClass() Method

Use removeClass() to remove specific classes, reverting styles.

Example: Removing classes:

// Assumes elements might have 'highlight' or 'text-blue' classes

$("#removeHighlightBtn").click(function() {
  // Remove 'highlight' class from all paragraphs
  $("p").removeClass("highlight");
});

$("#removeBlueTextBtn").click(function() {
  // Remove 'text-blue' class from the div
  $("#main-content").removeClass("text-blue");
});

$("#removeAllStylingBtn").click(function() {
  // Remove multiple classes (space-separated)
  $("#main-content").removeClass("text-large text-blue highlight");
});

$("#removeAllClassesBtn").click(function() {
    // Remove ALL classes from the div (pass no arguments)
    $("#main-content").removeClass();
});

jQuery toggleClass() Method

The toggleClass() method is very useful for interactive elements, adding the class if it’s not present and removing it if it is.

Example: Toggling a ‘highlight’ class on click:

// Assumes elements with class='clickable'

$(".clickable").click(function() {
  // Toggle the 'highlight' class on the specific element that was clicked
  $(this).toggleClass("highlight");
});

// Example using the optional switch
let shouldBeVisible = true;
$("#toggleVisibilityBtn").click(function() {
    shouldBeVisible = !shouldBeVisible;
    // If shouldBeVisible is true, remove 'hidden'. If false, add 'hidden'.
    $("#someElement").toggleClass("hidden", !shouldBeVisible);
});

jQuery hasClass() Method

Use hasClass() to check if an element currently possesses a specific class, often used within conditional logic.

Example: Checking for a class before performing an action:

$("#actionButton").click(function() {
  const $target = $("#statusMessage");

  if ($target.hasClass("error")) {
    console.log("Performing error handling...");
    $target.removeClass("error").addClass("resolved").text("Issue resolved.");
  } else if ($target.hasClass("success")) {
    console.log("Already successful, no action needed.");
  } else {
    console.log("Setting initial success state.");
    $target.addClass("success").text("Operation successful!");
  }
});

jQuery CSS Reference

For a complete overview of all jQuery CSS manipulation methods, including css(), please go to the official jQuery CSS documentation.