jQuery - Get and Set CSS Classes
The style of element may be easily handled using jQuery.
jQuery Manipulating CSS
jQuery offers several manipulation techniques for CSS. The following approaches will be examined :
addClass()- The selected items are adds one or more CSS classes.removeClass()- Deletes one or more CSS classes from the components chosen.toggleClass()- Add/delete the CSS classes from the chosen components.css()- Thestyleproperty is set or returned.
Example Stylesheet
All of the examples on this page will make use of the following stylesheet :
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
} Related Links
jQuery addClass() and removeClass() Methods
The addClass() is used add or insert CSS classes to an specified or multiple HTML elements.
The removeClass() is used remove or delete CSS classes from an specified or multiple HTML elements.
Example:- This example illustrates how class attributes may be added or removed from/to various components. Of course, when you add classes, you can pick several elements :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
// Add single css class to one element
$("#text1").addClass("textcolor");
$("#text2").addClass("backcolor");
// Add single css class to multiple element
$("#text1, #text2, #text3").addClass("boldtext");
// Add multiple css classes
$("#text3").addClass("textcolor backcolor");
});
$("#b2").click(function () {
// Remove single css class from one element
$("#text1").removeClass("textcolor");
$("#text2").removeClass("backcolor");
// Remove single css class from multiple element
$("#text1, #text2, #text3").removeClass("boldtext");
// Remove multiple css classes
$("#text3").removeClass("textcolor backcolor");
});
});
</script>
<style>
.boldtext {
font-size: large;
}
.backcolor {
background-color: orange;
}
.textcolor {
color: blue;
}
</style>
</head>
<body>
<h4 id="text1">This is heading 1</h4><br />
<h4 id="text2">This is heading 2</h4><br />
<h4 id="text3">This is heading 3</h4><br />
<button id="b1">Add classes to elements</button><br /><br />
<button id="b2">Remove classes from elements</button>
</body>
</html> Output :-
This is heading 1
This is heading 2
This is heading 3
Related Links
jQuery toggleClass() Method
The toggleClass() function is a combination of addClass() and
removeClass().
Example :- The toggleClass() function in jQuery is demonstrated in the following example. This function allows you to add/remove classes from the items you've chosen :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b5").click(function () {
$("#p1").toggleClass("makebold");
});
});
</script>
<style>
.makebold {
color: blue;
font-size: xx-large;
}
</style>
</head>
<body>
<p id="p1">This is a paragraph.</p>
<button id="b5">Toggle class</button>
</body>
</html> Output :-
This is a paragraph.