How to use addClass() Method in JQuery
In this article, I will explain use of addClass() Method in JQuery.
JQuery CSS addclass() Method
-
addClass() method adds one or more classes to the selected elements.
-
addClass() method does not remove existing class attributes.
-
addClass() method adds only one or more values to the class attribute.
-
We can add more than one class at a time, separated by space.
Syntax
| $(selector).addClass(class) |
Example
The following example shows how to addclass() method in jquery.
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p:first").addClass("FirstClass");
});
});
</script>
<style type="text/css">
.FirstClass
{
font-size:180%;
color:Purple;
}
</style>
</head>
<body>
<h1>This is addclass() method example</h1>
<p>One paragraph.</p>
<p>Second paragraph.</p>
<button>Click for Add a class to the first p element</button>
</body>
</html>
|
Output
Further Readings
You may also want to read these related articles here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here