How to Change Background Color in JavaScript?

19 Apr 2025 | 4 min read

What is the background color?

Using the background color feature, it is possible to insert a background color for a web page. The background-color property within an HTML element will be responsible for this. This affects the whole size of the element that has been specified, except for the margin. The default background color property is set to be transparent. Background colors in HTML are defined using either named values, HEX color codes, RGB color values, or HSL values.

Changing background color

Basic but crucial, it alters the background color of a webpage or an HTML element and represents the manipulation of the DOM. JavaScript allows various methods for such as adjusting CSS properties directly, using event listeners, and reacting to user events.

When developing the content for a web page, it should be embedded within the <body> tag. The color of the background of a web page can be changed with the help of bgcolor available in JavaScript. Several attributes are provided by JavaScript that impact the properties of the content, thereby dictating the behavior of the elements. The values of attributes must always be placed within double quotes. The syntax will be like this:

Syntax:

There are multiple ways of changing the background color in JavaScript, all of which are discussed in this article.

Methods to change background color

Utilizing the style.backgroundColor property
Employing classList.add()
Applying setAttribute()
Using addEventListener method

Utilizing the style.backgroundColor property

A simple way to change the background color of an element is by changing its style property. The property allows changing the direct CSS attributes of an element through JavaScript.

Syntax

Parameters:

document.body represents the whole webpage.
style allows you to change CSS styles.
backgroundColor the CSS property allows to change background color.

Code

Output

How to Change Background Color in JavaScript?

At the time, when we have clicked on "Click here to change the background color" we will see how the background color changed to pink and it is as seen below:

Employing classList.add()

You can use classList.add() to add a CSS class to the div, which will change its background color.

Syntax

Parameters:

element: The HTML element you want to apply the class to.
class1, class2, ., classN: a single or multiple class names to be included, like multiple classes are added by separating them with a comma.

Code

Output

Upon clicking the button labeled "Click here to change color of the box," the box's background color will alter to a light blue shade as indicated in the code below.

Applying setAttribute()

The setAttribute() function allows you to assign an attribute to an element. It can be used to change the style property instantly.

Syntax:

Parameters:

element: The HTML tag for that requires the alteration of its attribute.
attributeName: The specific attribute name (like class, style, and src) that you want to alter or define.
attributeValue: The new value we need to assign to the specific attribute.

Code

Output

When we click the button "Press this button to alter the background color" it will appear as below:

Using addEventListener method

JavaScript offers a way to link an event to an HTML element. The addEventListener() method monitors events like clicks, mouse movements, or key presses and runs a specific function whenever the event occurs.

Code

Output

When we click the button "Press this button to alter the color using addEventListener method" it will show as below:

Conclusion

Style.backgroundColor is okay for one-off, one-step changes.
We can use classList.add() for making styles more maintainable and reusable.
Use setAttribute() when the modification has attributes and is somewhat complex.
To handle on-click events, use addEventListener().

Next TopicJavaScript Grid

← prev next →

How to Change Background Color in JavaScript?

What is the background color?

Changing background color

Methods to change background color

Utilizing the style.backgroundColor property

Employing classList.add()

Applying setAttribute()

Using addEventListener method

Conclusion

Contact info

Follow us

Tutorials

Interview Questions

Online Compiler

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript Basics

JS Variables and Data Types

JS Control Statements

JavaScript Functions

JavaScript Objects

JS Advanced Functions

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON Object

JavaScript Validation

JavaScript Cookies

Exception Handling

JavaScript Collections

JavaScript Events

JavaScript OOPs

JavaScript BOM

Interview Questions

MCQ

Differences

JavaScript Map Methods

JavaScript Handler

JavaScript Number Methods

JavaScript Reflect

JavaScript Symbol

Symbol Property

JavaScript Math Methods

JavaScript Date Methods

JavaScript DataView

JavaScript Object Methods

JavaScript Set Methods

JavaScript String Methods

JavaScript TypedArray Method

JavaScript WeakMap Methods

JavaScript WeakSet Methods

JavaScript Array Methods

JavaScript RegExp Object

JavaScript Extras

JavaScript Misc

JavaScript Advance

Questions

Lodash

How to Change Background Color in JavaScript?

What is the background color?

Changing background color

Methods to change background color

Utilizing the style.backgroundColor property

Employing classList.add()

Applying setAttribute()

Using addEventListener method

Conclusion

Related Posts

JavaScript Increment and Decrement Operators

JavaScript hide elements

Sort Alphabetically in JavaScript

Sort Array of Objects JavaScript by key

When You Should Not Use Arrow Functions in JavaScript

Number to String in JavaScript

JavaScript String with quotes

Replit JavaScript

JavaScript Sorts an Array of Objects by Key