How to set background color for an elements using jQuery ?

How to set background color for an elements using jQuery ?

Last Updated : 31 Dec, 2020

In this article, we will set the background color for an element using jQuery. To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to check the present value of the property for the selected element.

Syntax:

$(selector).css(property)

Return value: It will return the value of the property for the selected element.

Example:

HTML

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

<head>
    <title>
        How to set background color
        for an elements using jQuery?
    </title>

    <!-- Import jQuery cdn library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").add("span").add("input")
                    .css("background", "green");
            });
        });
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        How to set background color
        for an elements using jQuery?
    </h3>

    <p>GeeksforGeeks computer science portal</p>
    <br>

    <span>GeeksforGeeks</span>
    <br><br>

    <input type="text">
    <br><br>

    <button>Click Here!</button>
</body>

</html>

Output:

Before Click Button:

After Click Button:

How to set background color for an elements using jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to set the background color of the specified elements using jQuery ?

In this article, we will see how to set the background color of specific elements using jQuery.To set the background-color, we use css() method. The css() method in jQuery is used to get or set CSS properties of selected elements. It allows you to retrieve the value of a CSS property or modify it by

How to apply styles on an element using jQuery ?

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 certai

How to get the background color of a clicked division using jQuery ?

In this article, we will learn how to get the background color of a clicked division using jQuery. Approach: All the divisions on the page are first selected using a common selector and a click binding is applied to trigger the color detection using the click() method. The division that is then curr

How to Set background Image using jQuery css() Method ?

This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname

How to add and remove CSS classes to an element using jQuery ?

In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas