How to use addClass() Method in JQuery

In this article, I will explain use of addClass() Method in JQuery.
  • 2108

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


addclass method.jpg

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

© 2019 DotNetHeaven. All rights reserved.