jQuery css() Method

jQuery css() method used to sets or returns one or more style properties for the selected elements.

The css() method used to returns the specified CSS property value of the first matched element. However shorthand CSS properties are not completely supported.

This method used to set specified CSS property for all matched elements.

Syntax

Here is a syntax for get the CSS property value

$(selector).css(propertyName);

Set the CSS property and value

$(selector).css(propertyName, value);

Set multiple properties and values

$(selector).css({propertyName: value, propertyName: value, ...});
Parameter Type Description
propertyName String Required. Specifies the CSS property name
for example "font-size", "color", "font-weight" etc.
value String Optional. Specifies the value of the CSS property
for example "red", "bold" etc.

Example: Return CSS property value

$(document).ready(function(){
  $("div").click(function(){
    $("p").html($(this).css("background-color"));
  });
});

Run it...   »

Example: Set a CSS Property

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color", "aqua");
  });
});

Run it...   »

Example: Set Multiple CSS Properties

$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color": "aqua", "font-size": "20px", "font-family": "Arial"});
  });
});

Run it...   »