How To Change The Background Color Of Body Using Javascript

How to Alter Groundwork Colour in Javascript

In this tutorial, you volition larn how to change background color in javascript. The background color of your website describes the overall theme of your website. Depending upon background color, y'all choose different colour palettes for buttons, inputs, and other elements.

Y'all must have seen websites where they give y'all the option to choose betwixt light and dark themes. Equally soon as you pick a theme, the groundwork color of the website, as well as background color of other elements gets changed.

We are not going to create some sort of theme here, but we are going to modify the groundwork color of a website dynamically.

Nosotros are going to modify the groundwork color in 2 scenarios. The start scenario involves changing the background color upon the click of a push. We will take multiple buttons and each button will represent a unlike color. Depending upon which push button is clicked, nosotros volition modify the background color.

The second scenario involves changing groundwork color upon the selection of specific color from the dropdown list. We volition pick on random color from the dropdown list and according to that, nosotros will change the background color.

In the post-obit case, we are going to cover both the approaches mentioned above. We take 3 buttons and a dropdown list. We will alter the background colour depending upon which push is clicked or which selection is selected from the dropdown list. Please have a look over the code example and the steps given below.

Ezoic

HTML & CSS

We have iv elements in the HTML file (div, button, select, and selection). The div element with a class of container is merely a wrapper for the rest of the elements.
We have 3 button elements with an innerText of "Red", "Green", and "Blueish" respectively.
We take a dropdown list with 4 color options. The default color indicates white color.
We have done some basic styling using CSS and added the link to our fashion.css stylesheet inside the caput chemical element.
We have likewise included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html> <html lang="en">  <caput>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Uniform" content="ie=edge">     <link rel="stylesheet" href="way.css">     <title>Document</championship> </head>  <body>      <div form="container">         <div>             <button id="btn-red">Red</button>             <button id="btn-dark-green">Green</push button>             <button id="btn-blue">Blue</button>         </div>          <div>             <select>                 <option value="default">Default</pick>                 <option value="blood-red">Red</option>                 <option value="greenish">Dark-green</option>                 <option value="blueish">Blue</option>             </select>         </div>     </div>      <script src="script.js"></script> </body>  </html>

.container {   brandish: flex;   justify-content: space-between; }  button {   height: 50px;   width: 50px; }

Javascript

We accept selected all the button elements and the select element using the certificate.querySelector() method and stored them in the btnRed, btnGreen, btnBlue, and dropdown variables respectively.
We have attached a click event listener to all the button elements.
In the click effect handler function of each push button element, we are using background property, and depending upon which button is clicked, nosotros are irresolute groundwork color according to that.
We have attached the modify result listener to the select element.
We are getting the value of the currently selected choice and storing it in the color variable.
We are using the switch argument and irresolute the background color co-ordinate to the value of the color variable. Nosotros have commented out this part.
We are using the if statement here. If the value of the colour variable is default, then we will set the background color to white. Otherwise, we will ready the background color based on the value of the color variable.

let btnRed = document.querySelector('#btn-red'); let btnGreen = document.querySelector('#btn-green'); let btnBlue = certificate.querySelector('#btn-blue'); let dropdown = certificate.querySelector('select');   btnRed.addEventListener('click', () => {     document.body.style.groundwork = 'cerise'; })  btnGreen.addEventListener('click', () => {     certificate.torso.style.background = 'dark-green'; })  btnBlue.addEventListener('click', () => {     document.torso.fashion.background = 'blue'; })  dropdown.addEventListener('change', function () {     const color = this.value;      /* switch (color) {         case 'red':             document.trunk.manner.background = 'red';             pause;         case 'greenish':             document.body.style.background = 'light-green';             break;         case 'blue':             document.body.mode.background = 'blue';             break;         default:             document.body.style.background = 'white';     } */      if(color === 'default'){         document.body.style.background = 'white';     }else {         document.body.manner.background = color;     } })