How to change Background Color with JavaScript (multiple methods explained)
If you want to change the background color of your page dynamically by JavaScript? There are multiple ways to do it.
This post will show the journey of how DOM manipulation alters the background color of a page with javascript with multiple approaches.
1) Background color changing with prompt
There is no html needed while using prompt method, only two lines of JavaScript required.
JavaScript code
let color=prompt("Enter color name");
document.body.style.backgroundColor=color;
let color=prompt("Enter color name");
This line will display a prompt box with user input space and two buttons ‘cancel’ and ‘ok’.
The ‘document.body.style.backgroundColor=color;’ changes the background color of the html body with every time the page refreshes.
Output
2) Background color changing by User input
You can also change the background color as per user choice.
html elements:-
<input type= “text”> - Used for taking value from the user. Take input in hexadecimal form and color name.
<input type= “button”> - Change the color of the background when clicked. Contains onclick event to call a function.
html code
<input type="text" name="tx" id="tx">
<input id="btn" type ="button" name="colorbtn" value="Change Background Color" onclick="bgcolor()">
CSS:-
The combination of position, top, left and transform properties set the input field and button position to center.
tx
{
position:absolute;
top:40%;
left:50%;
transform:translate(-50%,-50%);
}
#btn
{
position:absolute;
top:45%;
left:50%;
transform:translate(-50%,-50%);
padding:5px;
}
JavaScript :-
The first thing you have to do in js is fetching and getting the value of the html element by using the dom method.
The function bgcolor() gets input from the text box by ‘document.getElementById(‘tx’). value;’ and store in variable ‘col’. To change the background color ‘document.body.style.backgroundColor’ method used and input value assigned to this method. This function is called when a button onclick event is fired.
JavaScript code:-
let button=document.getElementById('btn');
function bgcolor()
{
let col=document.getElementById('tx'). value;
document.body.style.backgroundColor=col;
}
output:-
You can also enter the hex color code.
3) Background color changing by array and math.random()
With the use of array and math.random() function you can change the background color with only one click.
html element:-
<button> - When an online event is triggered, the function bgcolor() is called.
JavaScript:-
Array - An array stores the hex color values.
math.random() — The math.random() is a built-in static method in JavaScript that returns floating point numbers between 0 to 1.
The math.random() randomly selects hex color code from the list in the array.
math.floor() — Because of math.random() returns floating point numbers, the math.floor() is used with math.random to convert decimal points to the nearest integer.
Math.floor() returns a rounded integer.
colors[Math.floor(Math.random()*colors.length)];
Accesses hex color values from a randomly generated index.
*colors.length
Get Frontend Writing’s stories in your inbox
Join Medium for free to get updates from this writer.
scales the decimal point to range from element’s 0 index to last index (that is 6). In the array there are a total of 7 elements.
html code:-
<input id="btn" type ="button" name="colorbtn" value="Change Background Color" onclick="change_color()">
JavaScript code:-
function change_color()
{
const colors=['#000000','#ff0000','#00ff00','#ffff00','#ffbb33','#ff00ff','#0033cc'];
document.body.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)];
}
output
4) Background color changing with drop-down list
You can set background-color by selecting color from the list of colors in the drop-down menu.
html element:-
<select> — The select element used to contain the list of colors options where the user can choose one to change the background color.
onchange event:- The onchange event is used because here we use the <select> element where we select options from the drop-down list. This selection changed multiple times.
html code:-
<select id="colropt" onchange="bg()">
<option value ="optionselect">--select colors--</option>
<option value ="red">Red</option>
<option value ="blue">Blue</option>
<option value ="green">Green</option>
<option value ="orange">Orange</option>
<option value ="violet">Violet</option>
</select>
here, the function bg() is called when the onchange event triggers. The event specified in the select element.
CSS :-
display:block; — This property makes an inline element <select> to block-level element.
margin:auto; — Positioned <select> element to center horizontally.
#colropt
{
display: block;
margin:auto;
width:50%;
padding:5px;
}
JavaScript:-
The function bg() is called when an onchange event triggers and changes background color as the user selects options from the drop-down list.
JavaScript code:-
function bg()
{
let colors=document.getElementById('colropt').value;
document.body.style.background=colors;
}
output
5) Background color changing with color picker
The color picker gives you more choices including custom color to change the background color.
html element:-
<input type= “color”> — Display a clickable rectangular box with color shade in it. When you click on it a color picker with two buttons ‘SET’ and ‘CANCEL’ open. You can set the color of your choice.
onchange event:- The event triggers and called the bgcol() function when the user selects color from the color picker and hits the SET button.
html code:-
<input type ="color" id="pickcolor" onchange="bgcol()">
CSS:-
The position, top, left and transform properties place the element at the center of the page.
#pickcolor
{
position: absolute;
top:50%;
left:50%;
width:30%;
transform: translate(-50%,-50%);
}
JavaScript:-
The <input type= “color”> element only changes the color in the rectangular box not in the background. To change the background color JavaScript is needed.
The function bgcol() is called when an onchange event triggers.
JavaScript code:-
function bgcol()
{
colorpick=document.getElementById('pickcolor').value;
document.body.style.backgroundColor=colorpick;
}
output
Summary
By making a background color changer you are familiar with function, event and dom methods.
Below is the summary of dom methods used in this project with different approaches.
document.getelementById()
You show that this dom method is commonly used in all approaches used for changing background color. This method fetches the html element value by the ID name specified in the html id attribute.
document.body.style.backgroundColor
This DOM method is used for changing background color.
You can now add a JavaScript background color changer to your mini projects bucket list.
