How to set the background color of the specified elements using jQuery ? Last Updated : 06 Jun, 2023 Comments Improve Suggest changes Like Article Like Report 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 passing property names and values as arguments this method helps us to add CSS properties dynamically. Syntax : $("tag-name").css("property-name", "value"); Approach: We have created three elements inside the 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= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </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= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </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: Comment More infoAdvertise with us Next Article How to Set background Image using jQuery css() Method ? I iamabhishekkalra Follow Improve Article Tags : Web Technologies JQuery Web technologies HTML-Tags CSS-Properties jQuery-Questions jQuery +3 More Similar Reads How to set background color for an elements using jQuery ? 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 che 1 min read 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 2 min read How to Set the background-color of different Elements in CSS? Background colors in CSS set the color behind an element's content and padding. Use the background-color property to assign colors to elements, specifying values in hex, RGB, or color names. This allows customization of elements' backgrounds for design and readability.Using Background Color Property 2 min read 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 2 min read 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 2 min read How to change style of elements on scroll using jQuery ? We have given an HTML document containing some CSS properties, and the task is to change the CSS property to a particular element after scrolling the page using jQuery. To change the style of element on scroll, we get the number of pixels by which the content of an element has been scrolled horizont 2 min read Like