What is the background color?
By utilizing the background color functionality, one can apply a background hue to a web page. The background-color property within an HTML element governs this aspect. This property influences the entire dimensions of the specified element, excluding the margin. By default, the background color property is configured to be transparent. Background colors in HTML can be represented through various formats, including named values, HEX color codes, RGB color values, or HSL values.
Changing background color
Fundamental yet essential, it modifies the background color of a webpage or an HTML element, illustrating the manipulation of the Document Object Model (DOM). JavaScript provides multiple approaches for this, including directly modifying CSS properties, utilizing event listeners, and responding to user interactions.
While creating the content for a web page, it is essential to include it within the <body> tag. The background color of a web page can be modified using the bgcolor property in JavaScript. JavaScript offers various attributes that influence the characteristics of the content, consequently determining how the elements behave. It is important to enclose the values of attributes within double quotes. The syntax will resemble the following:
Syntax:
<body bgcolor="value">.
This article explores various methods for altering the background color using JavaScript, covering all the options available.
Methods to change background color
- Utilizing the style.backgroundColor property
- Employing classList.add
- Applying setAttribute
- Using addEventListener method
Utilizing the style.backgroundColor property
An straightforward method to modify the background color of an element is by altering its style property. This property enables the adjustment of the element's CSS attributes directly via JavaScript.
Syntax
document.body.style.backgroundColor = "color";
Parameters:
- document.body represents the whole webpage.
- style allows you to change CSS styles.
- backgroundColor the CSS property allows to change background color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to change the Background Color in JavaScript</title>
</head>
<body>
<h2>Example to change the Background Color in JavaScript using style.backgroundColor property </h2>
<button id="colorButton">Click here to change the background color</button>
<script>
document.getElementById("colorButton").addEventListener("click", function() {
document.body.style.backgroundColor = "pink";
});
</script>
</body>
</html>
Output
When we click on "Click here to change the background color," we will observe that the background color transitions to pink, as illustrated below:
Employing classList.add
Utilizing classList.add allows you to incorporate a CSS class to the div element, resulting in a modification of its background color.
Syntax
element.classList.add(class1, class2, ..., classN);
Parameters:
- element: The HTML element to which you wish to assign the class.
- class1, class2, ., classN: one or more class names that should be applied, where multiple classes can be specified by separating them with a comma.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to change background using classList.add() method</title>
<style>
.whiteBackground {
background-color: lightblue;
}
</style>
</head>
<body>
<div id="myDiv" style="width: 150px; height: 200px; border: 2px solid red;">No Color</div>
<button id="colorButton">Click here to change color of the box</button>
<script>
const div = document.getElementById("myDiv");
const button = document.getElementById("colorButton");
button.addEventListener("click", function() {
div.classList.add("whiteBackground");
});
</script>
</body>
</html>
Output
When you click the button titled "Click here to change color of the box," the background color of the box will transition to a light blue hue, as demonstrated in the following code.
Applying setAttribute
The setAttribute method provides the capability to assign an attribute to a specific element. This method can be utilized to modify the style properties of an element immediately.
Syntax:
element.setAttribute(attributeName, attributeValue);
Parameters:
- element: The HTML tag for that requires the alteration of its attribute.
- attributeName: The specific attribute name (like class, style, and src) that you want to alter or define.
- attributeValue: The new value we need to assign to the specific attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of altering the background via setAttribute</title>
</head>
<body>
<div id="buttonEx" style="width: 150px; height: 100px; border: 3px solid blue;">No Color</div>
<button id="buttonColor">Press this button to alter the background color.</button>
<script>
const div = document.getElementById("buttonEx");
const button = document.getElementById("buttonColor");
button.addEventListener("click", function() {
div.setAttribute("style", "background-color: pink; width: 100px; height: 100px; border: 2px solid yellow;");
});
</script>
</body>
</html>
Output
Upon clicking the button labeled "Press this button to alter the background color," it will manifest as illustrated below:
Using addEventListener method
JavaScript provides a mechanism to associate an event with an HTML element. The addEventListener method observes various events, such as clicks, mouse movements, or keyboard inputs, and executes a designated function each time the event takes place.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration to modify the background using the addEventListener technique.</title>
</head>
<body>
<div id="colorOfBox" style="width: 150px; height: 150px; border: 2px solid red;">No Color</div>
<button id="button">Press this button to alter the color using addEventListener method</button>
<script>
const div = document.getElementById("colorOfBox");
const button = document.getElementById("button");
button.addEventListener("click", function() {
div.style.backgroundColor = "yellow";
});
</script>
</body>
</html>
Output
Upon clicking the button labeled "Press this button to alter the color using addEventListener method," the result displayed will be as follows:
Conclusion
- Style.backgroundColor is okay for one-off, one-step changes.
- We can use classList.add for making styles more maintainable and reusable.
- Use setAttribute when the modification has attributes and is somewhat complex.
- To handle on-click events, use addEventListener.