Monkey Raptor

Saturday, November 1, 2014

jQuery: Declaring Multiple CSS Properties as Variable

The Basic
In jQuery, we can declare multiple CSS properties for a particular element (jQuery object) with the css() method like so:

The property and value pairs are declared as an object list.

As you can see above, there are CSS properties wrapped within quotations, we can use double quote (") or single ('), just be consistent with it (for the opening and closing mark).
The basic rule of thumb, if we have CSS property with a punctuation mark (-), we need to wrap it with quotations. Such as box-shadow, transform-origin, background-image, text-shadow, text-transform, etc.
For other CSS properties which aren't using punctuation mark, we don't need to wrap it. BUT, if it doesn't work, just wrap it then. With the quotations.

Also, for the value, if it's not a numeric value (for instance: 0, 1, 5, etc), we need to wrap it with quotations, such as 150px, #000, 0 0 20px red inset, etc.


Now for Gradient Color and Variable Declaration
For instance, we want to use different color gradient on an element on click event.

DEMO

Click on this box below, and it will have background color change.



This is the HTML of the demo above (CSS, HTML element, and the jQuery):


Why do we need to do this? Isn't that via CSS itself is much simpler?
YES.

BUT, sometimes, we want to put dynamical thing on our page, such as.. hm, things.

Still, declaring multiple classes via CSS then add/remove them in the jQuery is much simpler than this.
No doubt.

So then, what's the point of this post?
Hm, to show the variable declaration of object in jQuery css() method.

Oh, right.
*fistbump

Anywho, CSS is about coding the look of a page or a particular element.
Through a neatly typed script, we can make a page/an element interactive to visitor. Then, we can communicate that to our server to read/store some things, then we can analyze the database, then a spooky ghost will come to visitHalloween related.


LINKS
  • Microsoft Gradient Maker, right over there
  • jQuery CSS method at jQuery


Thanks for visiting!

jQuery: Declaring Multiple CSS Properties as Variable
https://monkeyraptor.johanpaul.net/2014/11/jquery-declaring-multiple-css.html

No comments

Post a Comment

Tell me what you think...