How to modify CSS class using jQuery library ?

Last Updated : 02 Aug, 2024

In this article, we will discuss how to modify the css class using jQuery. This is one of the major applications of jQuery. We generally use it when we have to add a dynamic style of the particular element of the HTML. For example, changing the color of particular class content dynamically.

Approach: We will use addclass(), css(), and some other methods of the jQuery library for modifying the CSS of the elements of HTML. Let's understand this application using the below examples.

Example 1: In this below example, we are modifying class (".gfg_class") using jQuery.

HTML

<!DOCTYPE HTML>
<html lang='en'>

<head>
    <meta charset='utf-8'>
    <title>JQuery Examples</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
        .gfg_class {
            color: green;
        }
    </style>
    <script>
        $(() => {

            // Updating the .gfg_class font
            $("#button1").click(function () {
                $(".gfg_class").css("font-size", "24pt");
            });

            // Adding border property to the span selector
            $("#button2").click(function () {
                $("span").css("border", "1px solid green");
            });

            // Setting background color attribute in class (#gfg_id)
            $("#button3").click(function () {
                $("#gfg_id").css("background", "green");
            });
        });
    </script>

</head>

<body>
    <input type="button" 
           id="button1" 
           value='button1' />
        Updating the .gfg_class font<br>
  
    <input type="button" 
           id="button2" 
           value='button2' />
        Adding border property to the span selector<br>
  
    <input type="button" 
           id="button3" 
           value='button3' />
        Setting background color attribute in class (#gfg_id)
    <br><br><br>

    <span class='gfg_class'>
      Hello this is GFG...
    </span>
  
    <br>
    <span>is</span><br>
    <span id='gfg_id'>Great</span>
    <br>
  
    <span class='gfg_class'>
      Hey,GFG you are great..
    </span>
    <br>
</body>

</html>

Output: Run the above code by creating a .html file using a text editor.

Example 2: In this example, you get to know "how to add a class in a division? ", and some of its properties for proper understanding follow comments and compare with the below output.

HTML

<!DOCTYPE HTML>
<html lang='en'>

<head>
    <meta charset='utf-8'>
    <title>JQuery Examples</title>

    <style>
        .gfg_class_1 {
            color: green;
            font-style: italic;
        }

        .gfg_class_2 {
            color: red;
        }

        .gfg_class_3 {
            font-size: 40pt;
        }

        .gfg_class_4 {
            font-size: 12pt;
        }
    </style>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script>
        $(() => {
            // adding class in div having 'id=someSection'
            $("#button1").click(function () {
                $("#someSection > div").addClass("gfg_class_1");
            });

            $("#button2").click(function () {
                $("#someSection div:not('.gfg_class_1')")
                  .addClass("gfg_class_2");
            });

            // Div ahving class gfg_class_1 and 
            // gfg_class_3 by below line
            $("#button3").click(function () {
                $("#someSection div.gfg_class_1")
                  .addClass("gfg_class_3");
            });

            $("#button4").click(function () {
                $("#someSection div.gfg_class_2")
                  .addClass("gfg_class_4");
            });
        });
    </script>
</head>

<body>
    <input type="button" id="button1" value='button1' />
      step : 1 adding class in div having 'id=someSection' 
    <br>
    <input type="button" id="button2" value='button2' />
      step : 2 the class gfg_class_2 will added in the div 2 and div 4 
      where the effect of class gfg_class_1 is consider secondary.
    <br>

    <input type="button" id="button3" value='button3' />
      step : 3 div having primary class gfg_class_1 (div 1 and div 3) 
      also get gfg_class_3 by below line.
    <br>
  
    <input type="button" id="button4" value='button4' />
    step : 4 div having primary class gfg_class_2 (div 2 and div 4) 
    also get gfg_class_4 by below line
  
    <br><br><br>
    <div id='someSection'>
        <div>
            Hello,this is GFG.....
            <div>
                How can I help you ????
            </div> 
        </div> 
        <div>
            Okay ,so you want to code...
            <div>
                Let's begin....
            </div> 
        </div> 
    </div>
</body>

</html>

Output: Run the above code by creating a .html file using a text editor.

Example 3: In this example you get to know "how to add class in the table?, and "How to set different types of styling in a different block, row, and column of a table? for proper understanding follow comments and compare with the below output.