Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 31 Mar, 2021

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. This method helps us to add CSS properties dynamically

Syntax : 

$("tag-name").css("property-name", "value");

Approach: We have created three elements inside body tag i.e. <h1>, <h2> and <p> elements. We apply CSS property on all the elements i.e. <h1>, <h2> and <p>.

Example 1: In this example, we are going to use CSS() method which sets the background color to our elements dynamically.



HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <script src=
    </script>
    <script>
        $(document).ready(function(){
           $("h1").css("background-color" ,  "red");
           $("h2").css("background-color" ,  "yellow");
           $("p").css("background-color" ,  "green");
        });
    </script>
</head>
<body>
    <h1>Hello GeeksforGeeks</h1>
    <h2>Hello Geeks</h2>
    <p>How Are You!!</p>
  
</body>
</html>

Output:

background-color

Example 2: In this example, we are going to use the addClass() method to set the background color of the elements.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <script src=
    </script>
    <script>
        $(document).ready(function(){
            $("h1").addClass("first");
            $("h2").addClass("second");
            $("p").addClass("third");
         });
    </script>
    <style>
        .first{
            background-color:green;
        }
        .second{
            background-color:orange;
        }
        .third{
            background-color:violet;
        }
    </style>
</head>
<body>
    <h1>Hello GeeksforGeeks</h1>
    <h2>Hello Geeks</h2>
    <p>How Are You!!</p>
  
</body>
</html>


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :