Home >>jQuery Tutorial >jQuery css() Method

jQuery css() Method

jQuery css() Method

jQuery css() method is used to add or returns one or more style properties in the selected elements.

When used to return properties:

This method is used to returns the specified CSS property value of the FIRST matched element.

When used to set properties:

This method is used to sets the specified CSS property for ALL matched elements.

Syntax:
Return the CSS property value:
$(selector).css(property)
Set the CSS property and value:
$(selector).css(property,value)
Set CSS property and value using a function:
$(selector).css(property,function(index,currentvalue))
Set multiple properties and values:
$(selector).css({property:value, property:value, ...})

Parameter Values

Parameter Description
property It is used to specifies the CSS property name, like "background-color", "font-weight", color etc.
value It is used to specifies the value of the CSS property, like "blue", "bold", etc.
function(index,currentvalue) It is used to returns the new value for the CSS property of the specified function
  • index – it is used to returns the index position of the selected element
  • currentvalue – it is used to returns the current value of the CSS property
Here is an Example of jQuery css() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".txt1").css("color", "blue");
});
});
</script>
</head>
<body>
<button class="btn1">click me</button>
<p class="txt1">This is a Phptpoint.</p>
<p class="txt1">This is a paragraph.</p>
</body>
</html>

Output:

This is a Phptpoint.

This is a paragraph.