Document

How to Change Background Color in Javascript

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

You must have seen websites where they give you the option to choose between light and dark themes. As soon as you pick a theme, the background 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 change the background color of a website dynamically.

We are going to change the background color in 2 scenarios. The first scenario involves changing the background color upon the click of a button. We will have multiple buttons and each button will represent a different color. Depending upon which button is clicked, we will change the background color.

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

In the following example, we are going to cover both the approaches mentioned above. We have 3 buttons and a dropdown list. We will change the background color depending upon which button is clicked or which option is selected from the dropdown list. Please have a look over the code example and the steps given below.

• We have 4 elements in the HTML file ( div , button , select , and option ). The div element with a class of container is just a wrapper for the rest of the elements.
• We have 3 button elements with an innerText of “Red” , “Green” , and “Blue” respectively.
• We have 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 style.css stylesheet inside the head element.
• We have also included our javascript file script.js with a script tag at the bottom.

          
  
 Default Red Green Blue  
 
  

• We have selected all the button elements and the select element using the document.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 event handler function of each button element, we are using background property, and depending upon which button is clicked, we are changing background color according to that.
• We have attached the change event listener to the select element.
• We are getting the value of the currently selected option and storing it in the color variable.
• We are using the switch statement and changing the background color according to the value of the color variable. We have commented out this part .
• We are using the if statement here. If the value of the color variable is default , then we will set the background color to white. Otherwise, we will set 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 = document.querySelector('#btn-blue'); let dropdown = document.querySelector('select'); btnRed.addEventListener('click', () => < document.body.style.background = 'red'; >) btnGreen.addEventListener('click', () => < document.body.style.background = 'green'; >) btnBlue.addEventListener('click', () => < document.body.style.background = 'blue'; >) dropdown.addEventListener('change', function () < const color = this.value; /* switch (color) < case 'red': document.body.style.background = 'red'; break; case 'green': document.body.style.background = 'green'; break; case 'blue': document.body.style.background = 'blue'; break; default: document.body.style.background = 'white'; >*/ if(color === 'default')< document.body.style.background = 'white'; >else < document.body.style.background = color; >>)

Источник

Form background color javascript

Last updated: Jan 11, 2023
Reading time · 2 min

# Table of Contents

# Change the background color of an Input field in JavaScript

To change the background color on an input field, set the input field’s style.background property to a specific color.

The backgroundColor property changes the element’s background color.

Here is the HTML for this example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> input type="text" id="first_name" /> button id="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event)  const input = document.getElementById('first_name'); input.style.backgroundColor = 'green'; // 👇️ optionally change the text color // input.style.color = 'white'; >); 

We used the document.getElementById() method to select the button element by its id .

We added a click event listener to a button, so every time the button is clicked, the handler function is invoked.

When the button is clicked, we access the input element and change its background color using the style.backgroundColor property.

# Change the background color when an Input field is Empty

To change the background color of an input field when it is empty:

1. Add an input event listener to the input field.
2. Check if the input’s value is empty.
3. If it is, set the style.backgroundColor property to a specific color.
4. Otherwise, set the style.backgroundColor property to an empty string.

Here is the HTML for this example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> input type="text" id="first_name" /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const input = document.getElementById('first_name'); input.addEventListener('input', event =>  if (input.value === '')  input.style.backgroundColor = 'lime'; > else  input.style.backgroundColor = ''; > >); 

We added an oninput event to the input field. The event gets triggered every time the value of the input field changes.

If the value is not empty, we reset the backgroundColor property.

You might see examples that use the onchange event instead of oninput .

The difference between the two is that oninput gets triggered immediately after the value has changed, whereas onchange occurs when the element loses focus.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Style backgroundColor Property

The backgroundColor property sets or returns the background color of an element.

See Also:

Syntax

Return the backgroundColor property:

Set the backgroundColor property:

Property Values

Value	Description
color	Specifies the background color. Look at CSS Color Values for a complete list of possible color values
transparent	Default. The background color is transparent (underlying content will shine through)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	transparent
Return Value:	A String, representing the background color
CSS Version	CSS1

Browser Support

backgroundColor is a CSS1 (1996) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

More Examples

Example

Set a background color of a specific element:

Example

Return the background color of a specific element:

Example

Return the background color of a document:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

JavaScript Change Background Color | With Example for Beginner

JavaScript Change Background Color:- We have to show you how to change the background with the example. And together we also show you how to do it in different ways.

So You can change the background color using javascript function. Below we have defined some point about it go and see your code with example

document.body.style.backgroundColor = "yellow";

JavaScript Change Background Color

We have given an example of the javascript code you can above. Now we have defined all about it and we can do it in many ways. As we know JavaScript is a client-side language.

So JavaScript has its own functions and syntax. By which we can change our page or block background color. We have shown you step by step all code with the example that how to use script and change background.

These are some lines about it

1. change the background color of div
2. change background using javascript function
3. onclick change color javascript.
4. change the background color on button click in javascript.
5. javascript CSS background color.
6. how to change background color of alert box in javascript.

javascript change background color of div

We can also change the background color from div and any block color change read more documentation using javascript. The style property can use any element like div, paragraph, and heading so on and also Link JavaScript to Html.

These are script language we can put code anywhere and showed output for it so many examples with using Html and element or javascript syntax.

document.getElementById("div").style.backgroundColor = "#ffffff";

Источник

Change the Background Color in JavaScript

This tutorial will discuss how to change the background color using the backgroundColor property in JavaScript.

Change the Background Color Using the backgroundColor Property in JavaScript

We can change the background color using the backgroundColor property in JavaScript. To use this property, you need to get the element whose background color you want to change, and then you can use the backgroundColor property to set the background color.

For example, let’s create a page using HTML and change the background color of the body to green using the backgroundColor property. See the code below.

 html> head>  title>title>  head> body>  script type="text/javascript">  document.body.style.backgroundColor = 'green';  script>  body>  html> 

You can also get the element with the id or name of the class. To get an element using its id, you can use the getElementById() function. To get an element using its class, you can use the getElementsByClassName() function.

For example, let’s get an element by its id and change its background color using the backgroundColor property. See the code below.

 html> head>  title>title>  head> body>  p id='myID'>  Hello Wold  p>  script type="text/javascript">  document.getElementById('myID').style.backgroundColor = 'green';  script>  body>  html> 

The code above will only change the background color of the element with id myID and not the whole body section. You also change the background color of an element using the color code of different colors instead of changing it using the color name.

Let’s write a code to change the background color of a text using a button. See the code below.

 html> head>  title>title>  head> body> button onClick="Mycolor()">Change Colorbutton> div id="myID">Hello Worlddiv> script type='text/javascript'> function Mycolor()  var element = document.getElementById("myID"); element.style.backgroundColor='#900'; >  script>  body>  html> 

In this code, you will see a button and a text. When you press the button, the background color of the text will change according to the given color.

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

Related Article — JavaScript Color

Источник