Home >> jquery >> jQuery CSS Classes

jQuery CSS Classes

jQuery makes available several methods, such as addClass(), toggleClass(), removeClass(), and so on, for the manipulation the CSS classes assigned to HTML elements.

jQuery addClass() Method

In this case, the addClass() method in jQuery adds one or more classes to the selected elements.

the example below shows how you will add the class .page-header to the <h1> and the class .highlight to the <p> elements with class .hint on button click.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding a Class to the Elements in jQuery</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
	.hint{
        font-style: italic;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header");
        $("p.hint").addClass("highlight");
    });
});
</script>
</head>
<body>
    <h1>Demo Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Add Class</button>
</body>
</html>

In addition, you can add multiple classes to the elements at a time. All you need to do is to specify the space-separated list of classes within the addClass() method, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding multiple Classes to the Elements in jQuery</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
	.hint{
        font-style: italic;
    }         
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header highlight");
    });
});
</script>
</head>
<body>
    <h1>Hello World</h1>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <button type="button">Add Class</button>
</body>
</html>

jQuery removeClass() Method

Also, in this case, classes can be removed from the elements by using the jQuery removeClass() method. The method can also be used to remove single classes, multiple classes, and even all classes at once from the selected elements.

In the example below, we will remove the class .page-header from the <h1> and the class .hint and .highlight from the <p> elements on button click.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing Classes from the Elements in jQuery</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
	.hint{
        font-style: italic;
    } 
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Remove Class</button>
</body>
</html>

If you call the removeClass() method without an argument it will remove all the classes from the selected elements. Below is an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing All the Classes from the Elements in jQuery</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
	.hint{
        font-style: italic;
    }      
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").removeClass();
        $("p").removeClass();
    });
});
</script>
</head>
<body>
    <h1 class="page-header">Demo Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Remove Class</button>
</body>
</html>

jQuery toggleClass() Method

The jQuery toggleClass() is basically used to add or remove one or more classes from the selected elements in a way that if the selected element already has the class, then it is removed; and if an element does not have the class, then it will be added (i.e toggle classes).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toggle the Classes of the Elements in jQuery</title>
<style>
    p{
        padding: 10px;
        cursor: pointer;        
        font: bold 16px sans-serif;
    }
    .highlight{
        background: yellow;
    }         
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).toggleClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Click on me to toggle highlighting.</p>
    <p class="highlight">Click on me to toggle highlighting.</p>
    <p>Click on me to toggle highlighting.</p>
</body>
</html>

-Advertisement-