jQuery: Get and Set CSS Classes

Managing CSS classes dynamically is a crucial aspect of creating interactive and responsive web applications. jQuery simplifies working with CSS classes by providing methods to add, remove, toggle, and retrieve classes for any element.

At The Coding College, we’ll guide you through these methods to help you build modern, stylish, and dynamic web pages.

jQuery Methods to Work with CSS Classes

1. addClass(): Adds one or more classes to the selected element(s).
2. removeClass(): Removes one or more classes from the selected element(s).
3. toggleClass(): Toggles (adds/removes) one or more classes.
4. hasClass(): Checks if the selected element(s) have a specific class.
5. attr(): Retrieves or sets the class attribute directly.

1. addClass() Method

The addClass() method is used to add one or more CSS classes to the selected element(s).

Syntax

$(selector).addClass(className);

Example

<div id="box" class="box"></div>
<script>
    $("#box").addClass("highlight");
    // Output: <div id="box" class="box highlight"></div>
</script>

2. removeClass() Method

The removeClass() method removes one or more CSS classes from the selected element(s).

Syntax

$(selector).removeClass(className);

Example

<div id="box" class="box highlight"></div>
<script>
    $("#box").removeClass("highlight");
    // Output: <div id="box" class="box"></div>
</script>

3. toggleClass() Method

The toggleClass() method adds a class if it doesn’t exist and removes it if it does.

Syntax

$(selector).toggleClass(className);

Example

<div id="box" class="box"></div>
<script>
    $("#box").toggleClass("highlight");
    // If "highlight" doesn't exist, it adds it:
    // Output: <div id="box" class="box highlight"></div>
    // If "highlight" exists, it removes it:
    // Output: <div id="box" class="box"></div>
</script>

4. hasClass() Method

The hasClass() method checks if the selected element(s) have a specific class. It returns true or false.

Syntax

$(selector).hasClass(className);

Example

<div id="box" class="box highlight"></div>
<script>
    if ($("#box").hasClass("highlight")) {
        console.log("The element has the 'highlight' class.");
    } else {
        console.log("The element does not have the 'highlight' class.");
    }
</script>

5. attr() Method

The attr() method can be used to directly get or set the class attribute of an element.

Syntax

// Get the class attribute
$(selector).attr("class");

// Set the class attribute
$(selector).attr("class", newClassName);

Example

<div id="box" class="box"></div>
<script>
    let currentClass = $("#box").attr("class");
    console.log(currentClass); // Output: "box"

    $("#box").attr("class", "new-box");
    // Output: <div id="box" class="new-box"></div>
</script>

Practical Examples

1. Add Multiple Classes

$("#box").addClass("highlight active");

2. Remove a Specific Class

$("#box").removeClass("active");

3. Toggle Classes Dynamically

$("#box").click(function () {
    $(this).toggleClass("highlight");
});

4. Check for a Class and Take Action

if ($("#box").hasClass("highlight")) {
    $("#box").removeClass("highlight");
} else {
    $("#box").addClass("highlight");
}

Combining Methods

You can chain these methods for complex interactions.

Example

$("#box")
    .addClass("new-class")
    .removeClass("old-class")
    .toggleClass("toggle-class");

Key Differences Between Methods

Best Practices

1. Use addClass and removeClass for readability and avoiding errors when working with multiple classes.
2. Sanitize Class Names: Ensure that class names used are valid CSS identifiers.
3. Optimize with toggleClass: Ideal for interactive UI components, like buttons or tabs.

Conclusion

Mastering the ability to get and set CSS classes in jQuery allows you to create dynamic and interactive designs easily. By combining these methods, you can implement advanced functionality with minimal effort.