Introduction to jQuery background color
In jquery, setting background color or changing the background color is done using the property of CSS() method provided by jquery and therefore we can define this background-color property within the CSS() method. It is used for setting the background color or to add the color to the background specified in the CSS() method. In general, the background color is defined as a style property for any of the page designing ads in jQuery. It is done by using the CSS() method in which the background-color property is defined along with the value specified and this method has many other style properties also.
Workingto set the background color in jquery
In this article, we will discuss how to set the background color of any web page using jquery. In Jquery, to set background color which is considered as a style property of CSS() method. In general, we can say when we deal with CSS we easily set the background color which is the style property for setting up the background color of the web page. Therefore, in jquery also we do consider it as a CSS property itself but this property can be used within CSS() method where we can define multiple CSS properties for styling the web pages using jquery. This CSS property can be used for setting up the background color for any elements in the web pages such as paragraph, text, text area, etc. This CSS() method takes the CSS styling property as an argument to change or set any of the styling property 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 function of jquery 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.
Now we will see a sample of how to set background color using the CSS() method in jquery in the below section.
Examples
Let us discuss examples of jQuery background color.
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 jquery code snippet can be seen within the <script> tag of the <body> tag. Then we are just declaring a paragraph tag using <p> inside the body to display it on the output screen. So the jquery code always starts with the “$” symbol where we are making the document as the content within the <body> tag where we are using CSS() method to set the background color for the content of the body element and the value is set as “blue” to this background. Where we can see we are passing this styling property such as “background” which indicates the background-color property and the value is written by separating with a comma and here we are mentioning the color name directly where we can use the RGB code or hexadecimal value for different colors. The output can be seen in the above screenshot.
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. These changes we can see by setting the “background-color” property within the CSS() method and each of these functions of the mouse are written within the document. ready() where we are making the document ready for such functions where the mouse events occur and the background color changes. Similarly, we have also created a box with red color and when we are double-clicking the box then the background color of the box also changes to blue. In the above screenshots we can see in the first we saw the paragraph changing to cyan color and in the second screenshot, we can see after one click on the paragraph which changes to orange color and in the third screenshot the box is double-clicked and the background color of the box changes to blue.
Conclusion
In this article, we conclude that in jquery setting the background color of any element or web page is very simple as we do in the CSS. This background color is a styling property that is defined and declared within the CSS() method provided by the jquery. 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 jQuery background color. Here we also discuss the introduction and How to set the background color in jQuery? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
