Jquery change element class 2016-05-18 03:59

We can not change class of element directly. But we can use two steps to change class. Remove old then add new one. Use addClass() function to add a class to each element. If you want add more than one class separating each one with a space. This function won't delete exist class it only append the specified class. Use removeClass() function to remove a class. Same as addClass() use space to separate multiple classes if you need remove more than one class.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Jquery change element class</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
    <style type="text/css">
        .old {
            font-size: 120%;
            color: red;

        .new {
            font-size: 90%;
            color: blue;
        .new2 {
            background-color: yellow;
<h1>Jquery change element class</h1>
<p class="old">when click the button will change the style of this paragraph.</p>
<p>This paragraph won't be changed.</p>

When click the button jquery select the first paragraph. Use removeClass() to remove class "old" then use addClass() to add new classes "new" and "new2".