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>