You can change the background color of an HTML element using JavaScript by setting the style.backgroundColor property of the element.

Here’s an example of how you can change the background color of a div element with the ID of “myDiv”:

document.getElementById("myDiv").style.backgroundColor = "red";

This will set the background color of the element with the ID “myDiv” to red. You can replace “red” with any other valid CSS color value, such as “blue”, “green”, “rgb(255, 0, 0)”, etc.

You can also use JavaScript to change the background color of multiple elements at once, for example:

document.querySelectorAll(".myClass").forEach(function(el) {
    el.style.backgroundColor = "red";
});

This will change the background color of all elements with the class “myClass” to red.

You can also use the classList API to add a class to the element, and set the background color on the CSS file of your project, like this:

document.getElementById("myDiv").classList.add("my-red-class");

And on your CSS file:

.my-red-class {
  background-color: red;
}

You can also use jQuery to change the background color, like this:

$("#myDiv").css("background-color", "red");

Keep in mind that changing the background color of an element using JavaScript does not change the actual HTML or CSS of the page, it only changes the rendered visual on the browser.

Also Read:

Categorized in:

JavaScript

Tagged in:

,