jQuery addClass() Method
You are Here:
jQuery addClass() Method
The jQuery addClass() method adds the specified class(es) to each element in the set of matched elements.
Adding One Class
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.point{
color: red;
font-size: 22px;
}
</style>
</head>
<body>
<h1>jQuery addClass() Method</h1>
<p>Click on the button to add the class '.point' to this paragraph.</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
//. in front of className is not necessary.
$("p").addClass("point");
});
});
</script>
</body>
</html>
Syntax
// Add one class
$(selector).addClass(className);
// Add multiple class
$(selector).addClass(className1 className2)
Parameter Values
| Value | Type | Explanation |
|---|---|---|
| className | Required | Specifies one or more class names to be added |
Adding Multiple Classes
Note: Classes are space-separated.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.point{
color: red;
font-size: 22px;
}
.point1{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuery addClass() Method</h1>
<p>Click on the button to add classes 'point' and 'point1' to this paragraph.</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
// no comma separator.
$("p").addClass("point point1");
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
