Question

How can you change the background color of an element using jQuery?

How do I change the background color of an element with jQuery? I want to modify the background color of specific elements on my page, but I'm not sure of the correct jQuery method or syntax to do this. What's the simplest way to achieve it?

Answer 1

The .css() method is one fast and flexible way to change the background color of an element using jQuery because it dynamically changes any CSS property of the element.

Syntax:

$(selector).css("background-color", "newColor");

Example:

Suppose you have a button with an ID of   colorChangeButton and you want to change the background color of a div with an ID of firstDiv to pink when the button is clicked. You can do this as follows:

$("#colorChangeButton").click(function() {
$("#firstDiv").css("background-color", "pink");
});