In this article we will show you the solution of how to add class in jQuery, we employ the jQuery addClass() method to add a new class. Each selected element can have additional classes and associated properties added to it using the addClass() method.
Moreover, it can be used to modify the selected element's property. The selected element can have one or even more class names added to it using the addclass() method.
Only one or even more class names may be added to a class attribute using this technique; the current class attributes may not be changed.
The CSS classes assigned to HTML elements can be changed using a number of jQuery functions, including addClass(), removeClass(), toggleClass(), and others.
The jQuery.addClass() method allows us to add several classes to an element.
Step By Step Guide On How To Add Class In jQuery :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro");
});
});
</script>
<style>
.intro {
font-size: 200%;
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<button>Add a class name to the first p element</button>
</body>
</html>
- Our first step is to write <HTML>, which tells the browser what version of HTML we're using. HTML documents contain tags as their first element.
- The project's heading must be described using the <head> tag. Titles and final brackets differ from final brackets because they are both open, rather than closed.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Then we close the script.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Then we close the script.
- Then we create a stylesheet for assigning color.
- After closing the style and head close.
- The <body> tag follows, which describes the content of the webpage.
- Then we create a paragraph.
- Then we create a button.
- Then we close button using </button>
- Our program was then closed using </body></html>
Conclusion :-
The argument consists of a list of the class names with spaces between them.
Using the same string of the class names as a parameter, we may remove numerous classes by calling the.removeClass() method.
To add and remove numerous classes at once, these two methods could be chained together.
I hope this article on how to add class in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
