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:

$( "div" ).css( "padding", "40px" );

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:

$( this ).css( "width", "+=100" ); // Increase the width by 100 pixels
$( this ).css( "width", "-=100" ); // Decrease the width by 100 pixels

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:

$( this ).css({
  "background": "gold",
  "font-size": "+=20",
  "padding": "+=40" 
});

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.

See how to add a class dynamically.

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:

$( this ).css( "background-color" );

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).

The JavaScript Version

You can use pure JavaScript to do the same thing as the jQuery css() method.

Here are examples of setting the background color with jQuery and JavaScript:

// jQuery version
$( "#sidebar" ).css( "backgroundColor", "orange" );

// JavaScript version
document.getElementById( "sidebar" ).style.backgroundColor = "orange"

You can also use JavaScript's getComputedStyle() to retrieve styles from an element.

However, using pure JavaScript can be tricky, because different browsers have typically used different ways of accessing various CSS properties (earlier versions of Internet Explorer used currentStyle and runtimeStyle instead of getComputedStyle() for example). Also, different browsers might also refer to properties in different ways.

When using jQuery, you don't need to concern yourself over these intricacies. The css() method works across all major browsers so you don't need to bother with cross-browser coding.