How to set the background color for an element using jQuery?


jQuery- a very popular JavaScript tool that helps in simplifying the process of web development consists of various tools that can be used to manipulate the HTML elements, CSS properties, and even event handling. Adding new or modifying styles of an HTML element dynamically is one such task that requires based on user interaction.

jQuery has various methods by which we can set the background color of an HTML element in using jQuery. We will see some different approaches including, using the CSS () method, using the addClass() method, and using the attr() method. Every method has its pros and cons, and choosing the right one depends on the specific needs of the application.

In this article, we will see how to set the background color for an element in HTML using jQuery.

Approaches to set background color for an element in jQuery

Setting the background color for an HTML is a very simple task but being simple, there are multiple ways through which the same task can be done. Let’s now see some of the different ways through which we can do this −

Using CSS() method

The first method is the CSS() method which is used to set the CSS properties to an HTML element. We can use this method also to set the background color of an element. To do that we can pass the CSS property name and value as arguments.

Syntax

See the following syntax for more detail −

$(document).ready(function(){
   $("button").click(function(){
      $("span").css("background-color", "green");
   });
});

Here, we are selecting the span element and set its background color to green at the click of the button.

Example

See the below example to understand how we can set the background color for an element using the css method.

<!DOCTYPE html>
<html>
<head>
   <title>Set background color using jQuery - css() method</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      /* This is our default style for span element*/
      #bgSpan {
         width: 200px;
         height: 200px;
         padding: 20px;
         font-size: 30px;
      }
   </style>
</head>
<body>
   <h2>Setting background color using jQuery - css() method</h2>
   <button id="btnColor">Click here</button>
   <span id="bgSpan">Welcome to Tutorialspoint</span>
   <script>
      $(document).ready(function() {
         $("#btnColor").click(function() {
            $("#bgSpan").css("background-color", "lightgreen");
         });
      });
   </script>
</body>
</html>

Output

In the above example, we have created a button that when clicked, sets the background color of the span element having id as “bgSpan” to lightgreen color with the help of the CSS () method.

Using attr() method

The attr() method is used to set the attributes of an HTML element. Now, this method can also be used to set the style attribute of an element for defining the CSS properties. To set the background color of an element with this method, we can pass the style attribute with our CSS properties as an argument.

Syntax

See the following syntax for more detail −

$(document).ready(function(){
   $("button").click(function(){
      $("span").attr("style", "background-color: green, border: 1px solid green");
   });
});

Here, we are selecting the span element and setting its background color to green and the border of 1px solid green also at the click of the button.

Example

See the below example to understand how we can set the background color for an element using the attr() method.

<!DOCTYPE html>
<html>
<head>
   <title>Set background color using jQuery - attr() method</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      /* This is our default style for span element*/
      #bgSpan {
         width: 200px;
         height: 200px;
         padding: 20px;
         font-size: 30px;
      }
   </style>
</head>
<body>
   <button id="btnColor">Click here</button>
   <span id="bgSpan">Welcome to Tutorialspoint</span>
   <script>
      $(document).ready(function() {
         $("#btnColor").click(function() {
            $("#bgSpan").attr("style", "background-color: lightgreen");
         });
      });
   </script>
</body>
</html>

Output

In the above example, we have created a button that when clicked, sets the style attribute of the span element having id as “bgSpan” to "background-color: lightgreen" using the attr() method. As compared to the above approach, this method is more powerful and simultaneously having error-prone because we need to use the correct syntax for the CSS rule.

Using addClass() method

Another way to set the background is by using the addClass() method. This method is used to add one or more classes to selected elements. To do this, we have to define some CSS rules for these classes in our stylesheet. But to set the background color for an element, we have to define a class with the desired background color and add it to the element.

Syntax

See the following syntax for more detail −

$(document).ready(function(){
   $("button").click(function(){
      $("span").addClass("green-background");
   });
});

Here, we have defined a CSS class with the name "green-background" in the stylesheet having a background color of green. Now, when the button is clicked, this class is added to the span element.

Example

See the below example to understand how we can set the background color for an element using the addClass() method.

<!DOCTYPE html>
<html>
<head>
   <title>Set background color using jQuery -addClass() method</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      /* This is our default style for span element*/
      .green-background {
         width: 200px;
         height: 200px;
         padding: 20px;
         font-size: 30px;
         background-color: green;
      }
   </style>
</head>
<body>
   <button id="btnColor">Click here</button>
   <span id="bgSpan">Welcome to Tutorialspoint</span>
   <script>
      $(document).ready(function() {
         $("#btnColor").click(function() {
            $("#bgSpan").addClass("green-background");
         });
      });
   </script>
</body>
</html>

Output

In the above example, we have created a button that when clicked, sets the style attribute of the span element having a class with the name “green-background” to "background-color: green" using the addClass() method. It also sets the four different CSS properties at the click of a button including setting the height, width, padding, and font-size.

Conclusion

In this article, we have learned multiple methods of how to set the background color of an element using a powerful library called jQuery. We have seen the different methods to set the background color which include the CSS() method, the attr() method, and the addClass() method. All of these methods are some of the commonly used methods to style HTML elements using jQuery. First, we saw the CSS() method that is used to set the CSS properties of an element then we saw another method called the attr() method which is used to set the attributes of an element and with the help of this, we can also set the background color of an element. The last method we saw was the addClass() method which adds a class to an element to define the CSS properties of an element. Choosing any method from the above all methods depends on the project requirements, etc. So, carefully select and use the method as per your requirement keeping in-mind their pros and cons.

Updated on: 10-May-2023

819 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements