How To Dynamically Change CSS Properties of Elements with jQuery


Did you know you can change elements’ CSS properties dynamically with jQuery? Well, yeah! You probably want to change an element’s opacity when a button is clicked to make it look like it is loading, for example. There are lots of uses this function can have, you set your own limits!

Let’s say we have a DIV with id=’ourdiv’ and blue background, and we want to change the background-color to red and opacity to 0.7, when the button (id=’button’) is clicked.  The function used to change CSS is css().

The syntax is pretty easy:


1. The complete function will be:

$("#button").click(function() {
 $("#ourdiv").css({"background.color":"red", "opacity":0.7});

Things to note:

– To add more properties, use a comma (,). In CSS we would use a semicolon (;), instead.

– Numbers don’t need quotes, note it in opacity value.

And well, that’s basically how to do it. If you need further help, please let me know so I can assist you. Any feedback is greatly appreciated.

Best Regards,


Owner of Juapo2Services

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Richi González

I started programming when I was 12. I'm a Developer and have been working with the Clip-Bucket script since it came out. I'm the Liaison between Arvixe and Clip-Bucket, so anything you need regarding Clip-Bucket or any particular computer-related subject you need, let me know so I can assist you.

Leave a Reply

Your email address will not be published. Required fields are marked *