How to apply styles on an element using jQuery ?

Last Updated : 21 Mar, 2022

In this article, we will learn how one can apply a style on an element using jQuery. Suppose you are building a website or game where you need the user interface to be interactive. In such cases styles can play a huge role there in this post we are going to learn how can we change styles when certain events got triggered with the help of JQuery. We can apply styles on elements by using either the JQuery CSS Classes or the JQuery .css() method.

Approach 1: Using JQuery CSS Classes. This approaches consists of using methods such as the addClass() method, removeClass() method and the toggleClass() method. These methods works similar to the classList.addClass() method and classList.removeClass() method. We can create some classes with some css rules and add or remove them using JQuery as per the requirement.

Syntax:

$("#poll").removeClass("safe").addClass("danger");
// OR
$("#poll").toggleClass("danger");

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <style>
        #poll {
            position: absolute;
            bottom: 15%;
        }

        #submit {
            position: absolute;
            bottom: 10%;
        }

        .safe {
            background-color: rgb(6, 161, 6);
            width: 20%;
            height: 30%;
        }

        .danger {
            background-color: rgb(226, 19, 19);
            width: 20%;
            height: 60%;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>How can you apply a style on an 
        element using jQuery?</h3>
    <div id="poll" class="safe"></div>
    <button id="submit">Alarm</button>
    <script>
        $("#submit").click(function () {
            // We can either remove the old
            // class and add a new one
            // $("#poll").removeClass("safe").addClass("danger");

            // Otherwise, we can toggle the class
            $("#poll").toggleClass("danger");
        })
    </script>
</body>

</html>

Output:

In the above example, we maintain two different classes safe and dangerous for different states. Initially, class safe is attached to div with id #poll and on clicking the button this safe class is removed and danger class is added dynamically which increased the height of the div and changed its background color to red.

If you are confused about which class to remove and which class to add then the toggleClass("className") method is there for you. This method adds class(which is passed as an argument inside the method) to the HTML tag if not currently added or removes the class from the element if it's currently added to the HTML tag. In simple words, this method toggles between adding/removing classes from the selected elements.

Approach 2: Using the JQuery css() method: In this method, instead of creating separate classes inside the stylesheet, you can directly set styles from javascript itself. The css() method can be used to either return a single property based on the given property or set a single or multiple CSS properties.

Syntax:

// Assigning a single CSS property
$("#phone").css("background", "red");

// Assigning multiple properties
$("#phone").css({"background": "red", "font-size": "16px"});

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>How can you apply a style on an
        element using jQuery?</h3>
    <b>Telephone Number Verification</b>
    <br><br>
    <input type="number" id="phone" 
           placeholder="Enter the Phone No." />
    <span id="warning"></span><br><br>
    <button id="submit">Check</button>

    <script>
        $("#submit").click(function () {

            // Regular expression to check 
            // for an indian phone number
            const regexExp = /^[6-9]\d{9}$/gi;
            const phone = $("#phone").val();

            // Add or remove classes based on
            // the regular expression check
            if (!regexExp.test(phone)) {
                $("#warning").text("It's wrong try again!");
                $("#warning").css("color", "red");
                $("#phone").css("background", "red");
            } else {
                $("#warning").text("It's correct");
                $("#warning").css("color", "green");
                $("#phone").css("background", "green");
            }
        });
    </script>
</body>

</html>

Output: We have checked whether the entered Indian phone number is correct or not for which we checked input value against a custom regex pattern if it's false then using the JQuery CSS method we changed the background color of the input Textarea and displayed a warning.