jQuery addClass() Method

jQuery addClass() method adds one or more class to selected elements.

Note The addClass() method does not replace a class. It simply adds the class.

Syntax

This syntax represent to the addClass() method

$(selector).addClass( className, function(index, currentclass) );
Parameter Type Description
className String Required. Add one or more space separated classes.
function(index,currentclass) Function Optional. A function that returns one or more class names to be added.
  • index - Return the index position of the element in the set as an argument.
  • currentclass - Returns the current class name of the element in the set as an argument.

Example

Here, in this example addClass() method call on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery addClass Selector</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $("p").addClass("param");
      });
    });
  </script>
  <style type="text/css">
    .param {
      font: 16px Verdana, Arial;
      font-weight: bold;
      color: pink;
    }
  </style>
</head>
<body>
  <p>First paragraph star here</p>
  <p>Second paragraph star here</p>
  <button>Click here to call addClass() method</button>
</body>
</html>

Run it...   »