Manipulate CSS with jQuery
Change CSS styles on the fly using jQuery's css()
method.
The jQuery 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.
Here's an example of setting the padding
on a div
element:
And here it is in action:
In this example, we use jQuery to increase the padding
on the div
element.
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.
Like this:
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.
Like this:
Here's an example of that:
The addClass()
and toggleClass()
Methods
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.
jQuery's 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)
, #32cd32
, 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 em
, %
, px
, vh
, etc) but most browsers return the pixel value (px
).