Modify the JavaScript property document.body.style.background.
For example:
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });
Note: this does depend a bit on how your page is put together, for example if you're using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body.
Answer from user7094 on Stack OverflowW3Schools
w3schools.com › jsref › prop_style_backgroundcolor.asp
HTML DOM Style backgroundColor Property
The backgroundColor property sets or returns the background color of an element. ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · If you want to report an ...
Top answer 1 of 16
268
Modify the JavaScript property document.body.style.background.
For example:
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });
Note: this does depend a bit on how your page is put together, for example if you're using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body.
2 of 16
87
You don't need AJAX for this, just some plain JavaScript setting the background-color property of the body element, like this:
document.body.style.backgroundColor = "#AA0000";
If you want to do it as if it was initiated by the server, you would have to poll the server and then change the color accordingly.
html - How to change in javascript background color from css - Stack Overflow
Regarding id attributes on style tags... stackoverflow.com/questions/3797221/… 2021-11-28T20:13:35.233Z+00:00 ... Here is how I'd change the body's background color with javascript. More on stackoverflow.com
Changing the style attribute background-color? - JavaScript - SitePoint Forums | Web Development & Design Community
Hey all, My knowledge of JavaScript is limited and I’m working on expanding it. At this point I’m working on changing style attributes for a div, and am wondering how to change the value for the “background-color”. bo… More on sitepoint.com
0
April 13, 2006How to change background color using JavaScript
Piotr Manczak is having issues with: It doesn't work. It doesn't say why. Any ideas what I'm doing wrong? More on teamtreehouse.com
2
February 1, 2019How to change background color with JS
Aryaman Dhingra is having issues with: I have some test code here, in which I am trying to change the background color of a page with the click of a button. The code seems correct to ... More on teamtreehouse.com
1
July 10, 2017Videos
03:42
Dynamic Background Color Change with JavaScript | Beginner Tutorial ...
04:04
Change Background Color Discover the Power of JavaScript in Web ...
10:00
How to change background color in javascript with one button | ...
03:20
How To Change Background Color With JavaScript - YouTube
05:46
Change Background Color onclick using JavaScript-2024 - YouTube
05:14
How to Change Div Background Color Dynamically using Javascript ...
Sololearn
sololearn.com › en › Discuss › 2442349 › solvedhow-can-i-change-background-color-of-a-div-element-using-javascript
[Solved]How can I change background color of a div element using javascript? | Sololearn: Learn to code for FREE!
I tested and got similar code to show the background colour using the following code in Sololearn's Code Playground: JS: document.addEventListener('DOMContentLoaded', function() { var div1=document.getElementById("div1"); div1.style.backgroundColor="#ffff00"; // yellow }); HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="div1">Hello</div> </body> </html> ... It was just an example code. Actually neither the id of Div is div1 nor I need to set its colour as white. In my code, it's the header tag and I am creating a function to change its color Html : line 8 Javascript : line 19 The function should run when you click Alarm div in webpage....
Top answer 1 of 6
3
You are attempting to set the background colour of the <style> tag. This is not how it works. Instead of setting the style of the <style> tag, you should set the style of the body itself. This W3Schools Article gives an explanation if you need one.
<head>
<style>
body {
background-color: pink;
}
</style>
</head>
<body id="1">
<script>
document.getElementById("1").style.backgroundColor = "brown";
</script>
</body>
It's also worth noting you don't need to assign the element to a variable unless you are going to use it later.
2 of 6
1
Use document.body.style.backgroundColor = "brown";, you can't put ids' or classes on non-elements. Try this;
var myVar = document.body.style.backgroundColor = "brown";body {
background-color: pink;
}This selects the body element, you could also put id = "1" on the body element.
Tabnine
tabnine.com › home › how to change the background color with javascript
How to Change the Background Color with JavaScript - Tabnine
July 25, 2024 - The code uses this property to assign the value “yellow” to the element, changing its background color to yellow. Note: Using the style property will add inline styling to the element. Inline CSS is the most specific level of CSS that can be applied to an object, applying to an individual element itself. It thus overrides most other CSS declarations for an element. This approach centers on using element properties in JavaScript to modify the inline style for an element.
SitePoint
sitepoint.com › javascript
Changing the style attribute background-color? - JavaScript - SitePoint Forums | Web Development & Design Community
April 13, 2006 - <script type="text/javascript" language="javascript"> var inputs = new Array(); changeBg = function(){ this.style.background = '#cccccc'; } revertBg = function(){ this.style.background = '#ffffff'; } init = function(){ inputs = document.getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++) { inputs[i].onfocus = changeBg; inputs[i].onblur = revertBg; } } window.onload = init; </script> ... It might not seem like a big deal for background color, but when you start using CSS shorthand properties to change only one element of a style for other elements, it can create larger problems…
GeeksforGeeks
geeksforgeeks.org › html › html-dom-style-backgroundcolor-property
HTML DOM Style backgroundColor Property - GeeksforGeeks
June 30, 2023 - Return Values: It returns a string value, which represents the background color. Example 1: In this example, we will use the backgroundColor property in HTML DOM. ... <!DOCTYPE html> <html> <head> <title> Style backgroundColor Property </title> ...
freeCodeCamp
freecodecamp.org › news › how-to-change-background-color-with-javascript
How to Change Background Color with JavaScript – BG Color in JS and HTML
June 28, 2024 - For a example, the background color of a div with an id of container can be changed using container.style.backgroundColor = "red" . In this article, you learned how to change background color with JavaScript using an element's style property.
Sololearn
sololearn.com › en › Discuss › 1831508 › how-to-change-background-color-by-javascript
How to change background color by JavaScript ? | Sololearn: Learn to code for FREE!
June 6, 2019 - I am making a code that will change the background color of the <body> element with JavaScript. I have tried the ways below but failed. Please let me know if you know any other ways to do it. • document.body.style.backgroundColor="red"; • document.getElementById("body").backgroundColor="red"; • document.getElementsByTagName("body").setAttribute("style","background-color:red"); Tell me if my code is wrong or it is a defect of sololearn app ?
Educative
educative.io › answers › how-to-change-background-color-in-javascript
How to change background color in JavaScript
The function is responsible for ... ways to change the background color of a web page using JavaScript: Using the style.backgroundColor property....
Team Treehouse
teamtreehouse.com › community › how-to-change-background-color-with-js
How to change background color with JS (Example) | Treehouse Community
July 10, 2017 - <body> <div> <input type='submit' id='red' class='buttons' value='Red'> <input type='submit' id='blue' class='buttons' value='Blue'> <input type='submit' id='green' class='buttons' value='Green'> <input type='submit' id='purple' class='buttons' value='Purple'> </div> <script> var blue = document.querySelector('#blue'); var red = document.querySelector('#red'); var green = document.querySelector('#green'); var purple = document.querySelector('#purple'); blue.addEventListener('click', => { document.body.style.backgroundColor = 'blue'; }); red.addEventListener('click', => { document.body.style.backgroundColor = 'red'; }); green.addEventListener('click', => { document.body.style.backgroundColor = 'green'; }); purple.addEventListener('click', => { document.body.style.backgroundColor = 'green'; }); </script> </body>
W3Schools
w3schools.com › cssref › tryit.php
Change background-color with JavaScript
The W3Schools online code editor allows you to edit code and view the result in your browser
Tutorial Republic
tutorialrepublic.com › faq › how-to-change-the-background-color-of-a-web-page-using-javascript.php
How to Change the Background Color of a Web Page Using JavaScript
Typically, any HTML element that supports the style attribute also has a style property. Here's an example: ... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change the Background Color with JavaScript</title> <script> // Function to change webpage background color function changeBodyBg(color){ document.body.style.background = color; } // Function to change heading background color function changeHeadingBg(color){ document.getElementById("heading").style.background = color; } </script> </head> <body> <h1 id="heading">This is a heading</h1> <p>This is a paragraph of text
Medium
frontendinterviewquestions.medium.com › how-to-change-background-color-in-javascript-6476c8fa4f44
How to change background color in JavaScript ? | by Pravin M | Medium
October 3, 2024 - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Change Background Color</title> </head> <body> <h1>Change Background Color Example</h1> <button id="changeColorBtn">Change Background Color</button> <script> const button = document.getElementById("changeColorBtn"); button.addEventListener("click", function() { document.body.style.backgroundColor = "lightblue"; // Change background color to light blue }); </script> </body> </html> HTML Structure: The HTML consists of a heading and a button that triggers the background color change. JavaScript Code: The script selects the button and adds a click event listener.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › background-color
background-color - CSS - MDN Web Docs - Mozilla
/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 50%); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e.
SoftAuthor
softauthor.com › home › javascript › change background color using javascript
Change Background Color Using JavaScript
December 29, 2025 - There are a few ways you can change the background color of an HTML Element dynamically in JavaScript. ... You can use the style.backgroundColor property directly in JavaScript to change a background colour of an HTML element.
GitConnected
levelup.gitconnected.com › change-background-color-using-javascript-e60d172e9124
Change Background Color Using JavaScript | by Raja Tamil | Level Up Coding
January 16, 2023 - This changes the background color of the entire page to red. window.addEventListener('load', () => { document.body.style.backgroundColor = 'red'; });
Tutorialspoint
tutorialspoint.com › html › html_dom_style_object_backgroundColor_property.htm
HTML - DOM Style Object backgroundColor Property
The following example changes the background color of div element to green. <!DOCTYPE html> <html lang="en"> <head> <title> HTML DOM Style Object backgroundColor Property </title> <style> div { height: 400px; width: 400px; } </style> </head> <body> <p>This is just a random text.</p> <button onclick="fun()">Change</button> <div id="color"> <p>This is color changing div</p> </div> <script> function fun(){ document.getElementById("color") .style.backgroundColor="#04af2f"; } </script> </body> </html>
Reddit
reddit.com › r/learnprogramming › need help with changing the background color using javascript
r/learnprogramming on Reddit: Need help with changing the background color using javascript
February 1, 2020 -
I keep getting an error telling me that newColor is undefined, which I thought thats what I did in the Javascript. I'm just lost. Any help would be appreciated.
HTML
<!DOCTYPE html>
<html> <head> <title>Background Color Change</title> <link rel="stylesheet" href="backgroundColor.css"> </head> <body id="body"> <button type="button" onclick="newColor()" id="colorChange"><b>Click Me</b></button> <script type="text/javascript" href="backgroundColor.js"></script> </body> </html>
Javascript
function newColor(){
var changeColor= document.getElementById("body");
changeColor.style.backgroundColor('green');
}
CSS
#colorChange:hover{
background-color: red;
}
#colorChange{
background-color: green;
}
#body{
background-color:blue;
text-align:center;
}