Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set background color of a particular div in jQuery?
jQuery is a very popular and widely used JavaScript library used in the process of writing and manipulating HTML documents, handling events, and adding dynamic effects and animations to web pages. Sometimes we need to style a particular div in our web page but don’t know which method to use and how to use it.
The process of styling the div is very easy and setting the background color of a particular div element can be achieved with the help of jQuery. Its process includes selecting the particular div element with the help of selectors, and then applying the CSS styles to set the background color.
jQuery has various methods by which we can set the background color of any div element in HTML. In this article, we will see how we can set the background color of a particular div, along with the different approaches that can be used in jQuery.
Approaches to set background color of particular div
Setting the background color is a very simple task but being simple, there are many 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 CSS () method is a built-in method of jQuery that is used to set or get the value of any CSS property of an HTML element. This method can be used to set the background color of a particular div. To accomplish that, see the following syntax first −
Syntax
$(document).ready(function() {
// Select the div element using its ID and set its background color to red
$("#myDiv").css("background-color", "red");
});
Example
In this approach, we have used one of the jQuery methods called CSS () method which can be used set the background color of a particular div element having a specific ID. Below is the HTML code for the example −
<!DOCTYPE html>
<html>
<head>
<title>Example of setting background color of a div using css() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#divNew {
width: 300px;
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<p>Setting background color of a div using css() Method</p>
<!-- particular div container with id "divNew" -->
<div id="divNew"></div>
<!-- function to add the background color of green to the div "divNew" -->
<script>
$(document).ready(function() {
$("#divNew").css("background-color", "green");
});
</script>
</body>
</html>
Output
In this example, we have used a div element having the ID "divNew" consisting of some CSS properties like width, height, and border defined in the CSS style. Here, we are going to use the jQuery selector that selects the div element with the ID "divNew" and set its background color to green using the jQuery css() method.
Using attr() Method
The attr() method is another jQuery method used to set the value of an attribute of an HTML element. We can use this method to set the background color of any particular div. To do this, we can set the "style" attribute of the div element to "background-color: green" (just for example). See the below syntax for more detail −
Syntax
$(document).ready(function() {
// Select the div element using its ID and set its "style" attribute to "background-color: red"
$("#myDiv").attr("style", "background-color: red");
});
Example
In this approach, we use the"style" attribute of the div to add any background color to the particular div element. Below is the HTML code for the example −
<!DOCTYPE html>
<html>
<head>
<title>Example of setting background color of a div using attr() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#divNew {
width: 300px;
height: 200px;
border: 1px solid black;
}
.background {
background-color: blue;
}
</style>
</head>
<body>
<p>Setting background color of a div using attr() Method</p>
<!-- particular div container with id "divNew" -->
<div id="divNew"></div>
<!-- function to add the background color of green to the div "divNew" -->
<script>
$(document).ready(function() {
$("#divNew").attr("style", "background-color: pink");
});
</script>
</body>
</html>
Output
In this example, we have created a div element with the ID "divNew" which has some properties like width, height, etc defined in the CSS style. Here, we are going to use one of the jQuery selectors that selects the div element having the ID "divNew" to set its "style" attribute to include the background color in the div element.
Using addClass() Method
The addClass() method is also a part of jQuery which is a built-in method used to add one or more CSS classes to an HTML element. This method can also be used for setting the background color of a particular div. To do that, we have to create a CSS class with the desired background color after which we can add it to the div element using the same method. See the following syntax −
Syntax
$(document).ready(function() {
// Create a CSS class with the desired background color
.red-background {
background-color: red;
}
// Select the div element using its ID and add the CSS class to it
$("#myDiv").addClass("red-background");
});
Example
In this approach, we are required to create a CSS class with a specific background color and then use the addClass() method to add the class to the particular div element. Below is the HTML code for the example −
<!DOCTYPE html>
<html>
<head>
<title>Example of setting background color of a div using addClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#divNew {
width: 300px;
height: 200px;
border: 1px solid green;
}
.background {
background-color: blue;
}
</style>
</head>
<body>
<!-- particular div container with id "divNew" -->
<div id="divNew"></div>
<!-- function to add the background color of green to the div "divNew" -->
<script>
$(document).ready(function() {
$("#divNew").addClass("background");
});
</script>
</body>
</html>
Output
In this example, we have defined a CSS class with the name "background" to add our background color to add a div element. After creating the class, we can now add this class to the div element with the ID "divNew" using our jQuery addClass() method in the code.
Conclusion
jQuery gives users multiple ways to style, and add functionality to their HTML documents or pages. Setting the background color of a particular div in HTML is one such problem in which there are various ways to achieve the task. The CSS() method is the first method that we have seen in this article which can be used to set the background color of any div element by selecting the div with their ID. Second, the attr() method is also used to set the style attribute of the div element to add the background color. And the last method was the addClass() method which is also used to add the background color by creating a CSS class with the desired background color and adding it to the div element. Each method discussed in this article is easy to use and can help achieve the desired user interface on web pages.
919 Views
To Continue Learning Please Login