Updated July 3, 2023
Introduction to jQuery background color
In jQuery, the background color of an element can be set or changed using the CSS() method, which jQuery provides. Using the CSS() method, we can define the background-color property and assign a specific color value. This allows us to set the background color or add color to the background of an element as specified within the CSS() method. The background color is commonly defined as a style property in jQuery for designing web pages. The CSS() method supports various other style properties in addition to the background-color property.
Working on setting the background color in jquery
This article focuses on the process of setting the background color of a web page using jQuery. This CSS property allows us to set the background color for various elements on web pages, such as paragraphs, text, text areas, and more. This CSS() method takes the CSS styling property as an argument to change or set any of the styling properties for the present web page.
Now let us see syntax and examples for setting the background color using jquery in the below section.
Syntax:
css("styling_property_name", "value");Parameters:
- Styling_property_name: CSS is a method in jquery that can set background property using the above parameter known as styling_property_name as “background-color.”
- Value: this parameter is used for setting the value to the styling property background-color, such as the values for this property can be RGB colors, such as the hexadecimal value of color or color by its names.
This jquery function is used for setting the background color of the current web page or any element on the web page. Hence this method will return the styling property for the selected element.
In the below section, we will see a sample of how to set the background color using the CSS() method in jquery.
Examples
Let us discuss examples.
Example #1
We will set the background color as blue in the below example.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title> Demonstration of setting background color in jquery </title>
</head>
<body>
<p> Setting the background color using css() method with styling background color property. </p>
<script>
$(document.body).css( "background", "blue" );
</script>
</body>
</html>Output:
In the above program, we can see we are writing the jquery code within the HTML structure, and the code snippet can be seen within the <script> tag of the <body> tag. Then we just declare a paragraph tag using <p> inside the body to display it on the output screen. So the code always starts with the “$” symbol where we are making the document as the content within the <body> tag where we are using the CSS() method to set the background color for the content of the body element and the value is set as “blue” to this background.
Now we will see another example of setting the background color for mouse functions using this styling property in another way.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of background color in jquery for web elements </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
margin: 5px;
}
</style>
<script>
$(document).ready(function(){
$("p").on({
mouseleave: function(){
$(this).css("background-color", "cyan");
},
click: function(){
$(this).css("background-color", "orange");
}
});
$( "div" ).dblclick(function() {
var color = $( this ).css( "background-color", "blue" );
});
});
</script>
</head>
<body>
<p> Click here to see the change of background color by moving the mouse and clicking on this paragraph. </p>
<h4> Double click on the below red box to see the change of background color </h4>
<div style="background-color:red;"> </div>
</body>
</html>Output:
In the above program, we can see we have used background color as a styling property on some mouse functions. As we can see in the above code, we are changing the background color of a paragraph when we hover the mouse over it and leave it. Then the background color of the paragraph changes to “cyan” color, and when we are clicking only once on the paragraph, then the background color of the paragraph changes to “orange” color. Similarly, we have also created a box with red color, and when we double-click the box, the background color of the box also changes to blue.
Conclusion
In this article, we conclude that in the setting, the background color of any element or web page is as simple as in the CSS. In this article, we saw a simple example of setting the background color, and then in another example, we saw how to set the background color or change the background color for the mouse click events with the proper screenshots.
Recommended Articles
This is a guide to the jQuery background color. Here we also discuss the introduction and How to set the background color in jQuery? along with different examples and code implementation. You may also have a look at the following articles to learn more –
