All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

Change Background Color JavaScript

Last Updated : Mar 11, 2024

Change Background Color JavaScript

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, = value ;

We will see on example using this below.

Step By Step Guide On Change Background Color JavaScript :-

<!DOCTYPE html>
<html lang="en">
    <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="">
            background-color: aliceblue;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        <h1> TALKERSCODE </h1>
        <h3> change background color JavaScript </h3>
    <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>
        function changeBgColor(e) {
   = e.value;
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. In order to style the HTML page, we'll utilize an external CSS file
  6. using <style> tag to add CSS
  7. 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
  8. now create <select> tag with the onchange of a function with an argument.
  9. Creating some <option> tags and adding some color to each tag's value.
  10. To write JavaScript, create a <script> tag
  11. Now calling the function and pass an argument e
  12. Using and equal it with e.value.
  13. 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.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪