Introduction:

Here we are going to explain what is addClass() function or how to use addClass() function or why use addClass() function or how to add class to the selected elements  in jQuery with example.

Description: 

The jQuery addClass() method is used to add one or more class name to the selected html element. This method is used only to add one or more class names to the class attributes. It is not remove the existing class name to the class attributes.

If you want to add more than one class separate the class names with spaces.

 Syntax:

To add class:

$(selector).addClass(classname) 


  • Example of jQuery addClass() function

Let's see an example to of jQuery addClass() function.

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery addClass tutorial</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
 
    <style>
        .Content{background-color:yellow; font-size:25px;}
    </style>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").addClass("Content");
            });
        });
    </script>
 
</head>
<body>
    
    <p>SQL Tutorials Point</p>
    <button>Add Class</button>
</body>
</html>

 

 

 

As shown in the above program, when user click on button then add Content class in my p element.

Output:


     I hope it will help to you.

 

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.