jQuery CSS Classes


To control the CSS classes assigned to HTML objects, jQuery provides several methods such as addClass(), removeClass(), toggleClass() and so on.


The addClass() method



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.page-header{
  color: red;
  text-transform: uppercase;
}
.highlight{
  background: yellow;
}
</style>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header");
        $("p.hint").addClass("highlight");
    });
});
</script>  
</head>
<body>

<h1>Demo Text</h1>
<p>Just a sample text...</p>
<p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Add Class</button>

</body>
</html>
Live Demo!


At the same time, you can add several classes to the elements. Simply enter a space-separated list of classes in the addClass() process, as follows: 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.page-header{
  color: red;
  text-transform: uppercase;
}
.highlight{
    background: yellow;
}
</style>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("h1").addClass("page-header highlight");
  });
});
</script>
</head>
<body>

<h1>Hello World</h1>
<p>This is a sample text for the addClass().</p>
<button type="button">Add Class</button>

</body>
</html>
Live Demo!


The removeClass() method


Similarly, the jQuery removeClass() method may be used to remove classes from objects. Remove a single class, multiple classes, or all classes from the selected elements with the removeClass() process.

On button press, the following example removes the class.page-header from the <h1> and the classes .hint and .highlight from the <p> components. 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.page-header{
  color: red;
  text-transform: uppercase;
}
.highlight{
    background: yellow;
}
</style>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("h1").removeClass("page-header");
      $("p").removeClass("hint highlight");
  });
});
</script>
</head>
<body>

<h1 class="page-header">Demo Text</h1>
<p>This is just a sample text...</p>
<p class="hint highlight"><strong>Tip:</strong> Sample and dummy text...</p>
<button type="button">Remove Class</button>

</body>
</html>
Live Demo!


The toggleClass() method


The jQuery toggleClass() function adds or removes one or more classes from selected elements in such a way that if the class is already present, it is removed, if the class is not present, it is added i.e. toggle classes.



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
p{
  padding: 10px;
  cursor: pointer;
  font: bold 16px sans-serif;
}
.highlight{
    background: yellow;
}
</style>
<script>
$(document).ready(function(){
  $("p").click(function(){
      $(this).toggleClass("highlight");
  });
});
</script>
</head>
<body>

<p>Click here in order to toggle highlighting.</p>
<p class="highlight">Click here in order to toggle highlighting.</p>
<p>Click here in order to toggle highlighting.</p>

</body>
</html>
Live Demo!