Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to return the background color of an element with JavaScript DOM?
In this tutorial, we will explore how to get and set the background color of an element using JavaScript DOM. The style.backgroundColor property allows us to both retrieve and modify background colors dynamically.
Browser Support
Chrome Browser ? Version 1.0 and above.
Edge Browser ? Version 12 and above.
Internet Explorer ? Version 4.0 and above.
Firefox Browser ? Version 1.0 and above.
Safari Browser ? Version 1.0 and above.
Opera Browser ? Version 3.5 and above.
Syntax
// Get background color let color = element.style.backgroundColor; // Set background color element.style.backgroundColor = "color|transparent|initial|inherit";
Parameters
color ? Specifies the background color (e.g., "red", "#ff0000", "rgb(255,0,0)").
transparent ? Makes the background transparent.
initial ? Sets the property to its default value.
inherit ? Inherits the property from the parent element.
Setting Background Color for Body
This example demonstrates how to change the entire page's background color:
<!DOCTYPE html>
<html>
<body>
<button onclick="changeBodyColor()">Click to Set Background Color</button>
<script>
function changeBodyColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>
Setting Background Color for Specific Element
This example shows how to change the background color of a specific div element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:black;">TUTORIAL POINT</h1>
<button onclick="changeColor()">Click to Change Div Color</button>
<div id="my-div" style="width: 250px; height: 100px; background-color: cyan; padding: 10px;">
<h2>TutorialPoint</h2>
</div>
<script>
function changeColor() {
document.getElementById("my-div").style.backgroundColor = "purple";
}
</script>
</body>
</html>
Getting Background Color of an Element
This example demonstrates how to retrieve the current background color:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:black;">TUTORIAL POINT</h1>
<button onclick="getColor()">Get Background Color</button>
<p id="result"></p>
<div id="my-div" style="width: 250px; height: 100px; background-color: cyan; padding: 10px;">
<h2>TutorialPoint</h2>
</div>
<script>
function getColor() {
let element = document.getElementById("my-div");
let bgColor = element.style.backgroundColor;
document.getElementById("result").innerHTML = "Background color: " + bgColor;
}
</script>
</body>
</html>
Using getComputedStyle() for Better Results
For elements with CSS-defined colors, use getComputedStyle() to get the actual computed color:
<!DOCTYPE html>
<html>
<head>
<style>
.colored-div {
background-color: lightgreen;
width: 200px;
height: 80px;
padding: 10px;
}
</style>
</head>
<body>
<div class="colored-div" id="css-div">CSS Background Color</div>
<button onclick="getComputedColor()">Get Computed Color</button>
<p id="computed-result"></p>
<script>
function getComputedColor() {
let element = document.getElementById("css-div");
let computedStyle = window.getComputedStyle(element);
let bgColor = computedStyle.backgroundColor;
document.getElementById("computed-result").innerHTML = "Computed color: " + bgColor;
}
</script>
</body>
</html>
Key Points
element.style.backgroundColoronly works for inline stylesUse
getComputedStyle()to get colors defined in CSS stylesheetsColors can be set using names, hex values, RGB, or HSL formats
The property returns an empty string if no inline background color is set
Conclusion
The style.backgroundColor property provides an easy way to get and set background colors dynamically. For CSS-defined colors, combine it with getComputedStyle() for complete color manipulation capabilities.
4K+ Views
