Skip to content
jQuery addClass – with 2 online demos
In This Tutorial
Video of this addClass Tutorial
The addClass method of jQuery
In jQuery CSS chapter, we learned how to add CSS to the specified element(s). We showed in the example how to add/apply CSS to a paragraph, adding one or more CSS properties etc. For example:
$(“p”).css(“color”,“red”);
This will add CSS property color as red to the paragraph element.
Instead of specifying properties ‘inline’, you can add CSS class that is created in a separate <style> block in internal or external CSS file. To add a class, the jQuery provides an addClass method.
The addClass method adds Class to the specified element.
An example of addClass method
In this tutorial, we will show you how to use jQuery addClass method with examples, but let us first look at the basic syntax of the addClass method.
Syntax of using addClass jQuery method
The basic syntax of the addClass method is:
$(“selector”).addClass(“class_name”);
Where selector can be a paragraph, div elements etc.
You can add one or more classes by using the addClass method. To add two or more classes just separate class names by space, e.g. “class1 class2”.
Now let us have a look at examples of using jQuery addClass method.
Example of addClass to div
In this example, we will add CSS to a div element. As you click on the button “Run addClass method”, it will change the color of Div text and adds a solid border around the div element.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#addclass”).click(function(){
$(“div”).addClass(“addclassex”);
});
});
</script>
<style>
.addclassex
{
color: #C03009;
font-size: 17px;
border: 1px solid #C03009;
}
</style>
</head>
<body>
<div id=“addclassdiv”>This is div element!</div>
<hr />
<button id=“addclass”>Run addClass method</button>
</body>
</html>
|
You can apply the class to the button as well by using the addClass method. This example shows as you click on button “Run addClass method” it will add the given class to button element. We will use button by ID in this example.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#addclass”).click(function(){
$(“#addbtn”).addClass(“addclassex”);
});
});
</script>
<style>
.addclassex
{
color: #C03009;
font-size: 17px;
border: 1px solid #C03009;
}
</style>
</head>
<body>
<div id=“addclassdiv”>This will add class to button element!</div>
<button id=“addbtn”>Example button</button>
<hr />
<button id=“addclass”>Run addClass method</button>
</body>
</html>
|
Also see jQuery find method | jQuery children method | jQuery filter | jQuery parents
Leave A Comment?