jQuery css() method - jQuery CSS Method

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

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

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

• propertyName Specifies the CSS property name for example "font-size", color", "font-weight" etc.
• value 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"));
  });
});

 
 
 

Example Result

Example (Set a CSS Property)

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

 
 
 

Example Result

Example (Set Multiple CSS Properties)

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

 
 
 

Example Result