Skip to content
Related Articles

Related Articles

Improve Article

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$(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=
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :