Change Background Color JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of change background color JavaScript, we will change the background color of any HTML page using the JavaScript function.
The syntax of functions in JavaScript is,
function name(parameter1, parameter2,......) {
// block of code
}
And we will set the background color using style attribute in Javascript. The syntax is,
Element.style.CSSproperty = value ;
We will see on example using this below.
Step By Step Guide On Change Background Color JavaScript :-
<!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 JavaScript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> change background color JavaScript </h3>
</center>
<select name="BgColor" id="BgColor" onchange="changeBgColor(this)">
<option value= "none"> Choose background-color </option>
<option value= "black">black</option>
<option value= "pink">pink</option>
<option value= "yellow">yellow</option>
<option value= "green">green</option>
<option value= "blue">blue</option>
<option value= "darkolivegreen">darkolivegreen</option>
<option value= "lightsalmon">lightsalmon</option>
<option value= "honeydew">honeydew</option>
<option value= "chocolate">chocolate</option>
</select>
<script>
function changeBgColor(e) {
document.body.style.background = e.value;
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- now create <select> tag with the onchange of a function with an argument.
- Creating some <option> tags and adding some color to each tag's value.
- To write JavaScript, create a <script> tag
- Now calling the function and pass an argument e
- Using document.body.style.background and equal it with e.value.
- Lastly, by selecting desired color to the HTML page we can change the background color.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to change background color using JavaScript.
I hope this article on change background color JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
