Manipulate CSS with jQuery
Change CSS styles on the fly using jQuery's
css() method enables you to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
In other words, you can do the following:
- Get styles from the web page.
- Set styles on the web page.
And here it is in action:
The example also uses
this to select the current element. We could have used
"div" instead, however, this would've applied the change to all
div elements. Using
this only changes the current one.
Incrementing and Decrementing a Value
jQuery allows you to use relative values to increment or decrement a value by a given amount. You can use
+= to increment a value or
-= to decrement a value.
Here's a working example:
If you click the box again and again, you'll notice that its width increases each time you click it.
This is because we're incrementing the value by a relative amount. Each time you click it, the width increases by 100 pixels.
If we'd specified an absolute amount (such as
200px) it would only change size on the first click. Subsequent clicks wouldn't change anything because the box is already 200 pixels wide.
Applying Multiple Declarations
You can set multiple declarations on an element by separating each property and its value with a colon, and separating each declaration with a comma.
Here's an example of that:
In many case you might find the
addClass() method or the
toggleClass() method a more suitable way to apply multiple style declarations.
These methods allow you to uses classes from your style sheet. No need to include style declarations within your jQuery code.
Getting Styles from an Element
Another thing you can do with the
css() method, is retrieve computed styles from an element. More specifically, it gets the computed style property from the first matched element.
Here's an example of getting the background color of an element:
Here's a working example of that:
Computed Value vs Style Sheet
When a browser displays a web page, it computes a value for each property. This computed value takes into account the initial values for each property, any inherited values, as well as the computation required to satisfy the "Computed value" part of the CSS specification.
css() method retrieves the computed value. This is not necessarily the value that's in your style sheet.
For example, the color
limegreen can be represented as
rgb(50, 205, 50),
hsl(120, 61%, 50%), etc, and so browsers could return any of these values. Check out this CSS color converter to see how colors can be represented in different ways.
Another example is when returning dimensions. You can specify dimensions using a whole range of units (such as
vh, etc) but most browsers return the pixel value (