How To Change The Background Color Using Jquery

Changing the background color of a div using jQuery is washed simply past using the css() method.

                $("#div").css("background-color", "green");

Let'southward say we have the post-obit HTML:

                <div id="div">   <p>This paragraph is in a div that we need to change the color of.</p> </div>

If we want to modify the groundwork colour of this div to dark-green, nosotros will use the jQuery css() method in the following JavaScript code.

                $("#div").css("groundwork-color", "greenish");

If you are using WordPress, don't forget to change the $ to jQuery as below:

                jQuery("#div").css("background-color", "greenish");

The second argument tin can be any valid css color. And then for example, we could utilise the hexadecimal value for light-green to change the background colour to green.

                $("#div").css("background-color", "#00FF00");

Using jQuery to Change Background Color of a Div with a Click

Many times when creating a web folio and the user experience, we desire to change the colour of a div and interact with another element on the web page.

To modify the groundwork colour of a div using jQuery, we can combine the css() method with a click result.

Allow's say nosotros have the post-obit HTML and we desire to change the background color of #div1 to green.

                <div>   <div id="div1">Div ane</div>   <div id="div2">Div 2</div>   <div id="click-me">Change background color of #div1</div> </div>

We can employ both the jQuery click() method and jQuery css() method to alter groundwork color.

Below is the JavaScript code which volition allow the user to exist able to update the background color of the div:

                $("#click-me").click(function(){   $("#div1").css("groundwork-color", "#7bbfa2"); });

The final code and output for this example of how to change the background color of our div using the jQuery css() method and JavaScript is below:

Code Output:

Div 1

Div two

Change background color of #div1

Full Code:

                <div>   <div id="div1">Div 1</div>   <div id="div2">Div 2</div>   <div id="click-me">Change groundwork colour of #div1</div> </div> <script> $("#click-me").click(function(){   $("#div1").css("groundwork-color", "#7bbfa2"); }); </script>

Hopefully this article has been useful for y'all to empathise how to change the background color of an element using jQuery.

About The Programming Proficient

The Programming Expert is a compilation of a programmer's findings in the world of software development, website creation, and automation of processes.

Programming allows us to create astonishing applications which make our piece of work more than efficient, repeatable and authentic.

At the cease of the twenty-four hour period, nosotros want to be able to just push a button and let the lawmaking do it's magic.

Y'all can read more about us on our nigh folio.