How To Dynamically Change CSS Properties of Elements with jQuery

Hello,

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:

$(element).css({“property“:”value,property“:”value“});

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,

Richi

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

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 became a Liaison between Arvixe and Clip-Bucket, so I am here to assist you with anything you need regarding Clip-Bucket or any particular computer-related subject you need. Best Regards, Richi

Leave a Reply

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


− 5 = 4

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>