jQuery — CSS Classes

addClass()

$("p").addClass("highlight");
$("p").addClass("highlight large");

removeClass()

$("p").removeClass("highlight");
$("p").removeClass(); // Remove all classes

toggleClass()

$("p").toggleClass("highlight");
$("p").toggleClass("highlight large");

##.hasClass()

if ($("p").hasClass("highlight")) {
    console.log("Has highlight class");
}

Conditional Class Add

$("p").addClass(function(index, currentClass) {
    return currentClass + " extra";
});

Practical: Active State

$("nav a").click(function(e) {
    e.preventDefault();
    $("nav a").removeClass("active");
    $(this).addClass("active");
});

Dark Mode Toggle

$("#darkToggle").click(function() {
    $("body").toggleClass("dark-mode");
    $(this).text(
        $("body").hasClass("dark-mode") ? "Light Mode" : "Dark Mode"
    );
});

Class Methods Summary

Method	Action
addClass()	Add class(es)
removeClass()	Remove class(es)
toggleClass()	Toggle class(es)
hasClass()	Check for class

Mini Practice

1. Add a class to a heading
2. Toggle a class on button click
3. Remove a class from all paragraphs
4. Check if an element has a class

Up Next

Continue with CSS — getting and setting CSS properties.