Change Background Color Using JavaScript

There are a few ways you can change the background color of an HTML Element dynamically in JavaScript.

1. Using style.backgroundColor property
2. Using ClassList.add()
3. Using setAttribute()
4. Change background color of a div
5. Change background color dynamically on button click

1. Using style.backgroundColor Property

You can use the style.backgroundColor property directly in JavaScript to change a background colour of an HTML element.

The below example will change the background color of the body element to red as soon as the HTML document loads on the browser.

This changes the background color of the entire page to red.

window.addEventListener('load', () => {
  document.body.style.backgroundColor = 'red';
});

Try it out

See the Pen Change Background Color Using JavaScript #1 by SoftAuthor (@softauthor) on CodePen.

2. Using ClassList.add() Method

You can also change the background color of an HTML element by adding an external CSS rule which can be specified inside style tags or a separate CSS file.

In this case .bg-color{} which has a single property background-color:red;

.bg-color {
  background-color:red;
}

Then, add the .bg-color class to the body HTML element when the page loads using the classList.add() method.

window.addEventListener("load", () => {
  document.body.classList.add("bg-color");
});

This approach is cleaner than the first one because…now you can toggle the background color of the element by simply adding or removing the .bg-color CSS class.

Try it out

See the Pen Change Background Color Using JavaScript #2 by SoftAuthor (@softauthor) on CodePen.

3. Using setAttribute() method

Alternatively, you can also use the setAttribute() method to change the background color of the element instead of using the classList.add() method.

The setAttribute() method takes two arguments:

1. Attribute name: class
2. Attribute value: bg-color

window.addEventListener("load", () => {
  document.body.setAttribute("class" , "bg-color");
});

Try it out.

See the Pen Change Background Color Using JavaScript #3 – setAttribute() by SoftAuthor (@softauthor) on CodePen.

4. Change Background Color Of A Div

Instead of changing the background color of an entire page, let’s change a div background color.

Here is a simple HTML markup.

index.html

<div id="box">
</div>

Here is the CSS style for the box element.

style.css

html, body {
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
} 

#box {
  width:100px;
  height:100px;
  background:#32bacf;
}

.bg-color {
  background-color:red;
} 

Now change the background color of the box div element from blue color (#32bacf) that I’ve set inside #box CSS class to red colour using .bg-color CSS class inside JavaScript.

Inside the page load event, get a DOM reference of the div element using its id box.

const box = document.getElementById("box");

window.addEventListener("load", () => {
    box.setAttribute("class", "bg-color"); // DON'T WORK
});

Unfortunatley, the above code won’t work...

That’s because when you add a different background color to id CSS selector and class CSS selector that are attached to the same HTML element, the background color specified inside the id CSS selector takes precedence.

Thats why the background color remains blue even after adding the .bg-color class to the element.

In this case, you need to use the style.backgroundColor property to override the background color specificed in the #box CSS selector.

window.addEventListener("load", () => {
  box.style.backgroundColor = "red"; // IT WORKS
});

Try it out

See the Pen Change Background Color Using JavaScript #3 – Div by SoftAuthor (@softauthor) on CodePen.

5. Change Background Color On Button Click

Let’s create 4 buttons and have each represent a different color inside a div with an id button-group.

Change the background color of the page dynamically depending on which button is clicked using JavaScript.

<div id="button-group">
   <button value="red">Red</button>
   <button value="blue">Blue</button>
   <button value="green">Green</button>
   <button value="yellow">Yellow</button>
</div>

As you can see, each button has a value attribute with color name.

Use the value attribute to change the background color of the page on the button click.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}


body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:grey;
}

#button-group {
    background: black;
    padding: 20px;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: white;
    color: black;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

button:hover {
    background: rgba(255, 255, 255, 0.9);
}

Next, attach a click event to the button-group div element.

Check to see if the clicked element is a button.

If it is a button, change the background color of the body tag to the clicked button color, based on its value attribute.

You can get the value atribute from the event object – e.target.value.

const buttonGroup = document.getElementById("button-group");

const buttonGroupPressed = (e) => {
  const isButton = e.target.nodeName === 'BUTTON';
  if(!isButton) {
     return
   }
  document.body.style.backgroundColor = e.target.value;
  e.target.style.backgroundColor =  e.target.value;
  
}

buttonGroup.addEventListener('click', buttonGroupPressed);

Finally, change the background color of the clicked button to the color that the button represents, again based on its value attribute.

Try it out

See the Pen Change Background Color Using JavaScript #5 – On Click by SoftAuthor (@softauthor) on CodePen.