jQuery CSS

❮ Previous Next ❯

jQuery Get and Set CSS Classes

Manipulating CSS classes is one of the most common uses for jQuery.

Instead of changing inline CSS styles individually, it is much cleaner to toggle predefined classes.

jQuery CSS Class Methods

jQuery provides three highly optimized methods for class manipulation:

addClass() - Adds one or more classes to the selected elements.
removeClass() - Removes one or more classes from the selected elements.
toggleClass() - Toggles between adding and removing classes from the selected elements.

The addClass() Method

The addClass() method attaches a class to an element without overwriting its existing classes.

You can also pass multiple classes at the same time by separating them with a space.

Add Class Example:

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important blue");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
  .important { font-weight: bold; font-size: xx-large; }
  .blue { color: blue; }
  </style>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <p>This is a paragraph.</p>
  <div>This is some important text!</div>
  <br>
  <button>Add classes to elements</button>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("h1, h2, p").addClass("blue");
      $("div").addClass("important blue");
    });
  });
  </script>
</body>
</html>

The removeClass() Method

If an element has a class you no longer want, removeClass() takes care of it.

This is perfectly suited for removing "active" states from navigation menus.

Remove Class Example:

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
  .blue { color: blue; }
  </style>
</head>
<body>
  <h1 class="blue">Heading 1</h1>
  <h2 class="blue">Heading 2</h2>
  <p class="blue">This is a paragraph.</p>
  <button>Remove blue class</button>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("h1, h2, p").removeClass("blue");
    });
  });
  </script>
</body>
</html>

The toggleClass() Method

The toggleClass() method is incredibly powerful for interactive UI elements.

It checks if a class exists. If it exists, it removes it. If it doesn't exist, it adds it.

Toggle Class Example:

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
  .blue { color: blue; }
  </style>
</head>
<body>
  <h1>Heading 1</h1>
  <p>This is a paragraph.</p>
  <button>Toggle class</button>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("h1, p").toggleClass("blue");
    });
  });
  </script>
</body>
</html>

Exercise 1 of 1

Which method is best for creating a button that switches a dark-mode theme on and off?

switchClass() addClass() toggleClass()

❮ Previous Next ❯

jQuery Basics

jQuery Effects

jQuery HTML

jQuery Traversing

jQuery AJAX

jQuery Misc