How to manipulate CSS using jQuery ?

addClass()

Adds one or more classes to the selected elements.

Example

Assuming, There are two CSS classes defined : "myheading" and "mysection

$("button").click(function() {

  $("h1,h2,p").addClass("myheading");

  $("div").addClass("mysection");

});

Example Specifying multiple classes

$("button").click(function() {

  $("#div1").addClass("important blue");

});

removeClass()

Removes one or more classes from the selected elements.

Example

$("button").click(function() {

  $("h1,h2,p").removeClass("blue");

});

toggleClass()

Toggles between adding/removing classes from the selected elements.

Example

$("button").click(function() {

  $("h1,h2,p").toggleClass("blue");

});

css()

Sets / returns one or more style properties for the selected elements.

Return a CSS Property

css("propertyname");

Example Return the background-color value of the FIRST matched element

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

Set a CSS Property

css("propertyname","value");

Example Set the background-color value for ALL matched elements

$("p").css("background-color","yellow");

Set Multiple CSS Properties

css({"propertyname":"value","propertyname":"value",...});

Example [ Set a background-color and a font-size for ALL matched elements ]

$("p").css({"background-color":"yellow","font-size":"200%"});