The jQuery css() method is used to get or set style properties of selected elements.
When css() method is used to return style properties:
It returns the css property value of the first matched element.
Syntax:
$(selector).css(property)When css() method is used to set style properties:
It sets the specified css property values for all the matched elements (selected elements).
Syntax:
$(selector).css(property,value)Example 1: jQuery css() – get css property value
In this example, we are using css() method to get the css property value of the matched element. We already discussed in the beginning that css() returns the css property value for first matched element.
Here we have three paragraphs. All of them have different background color css property value. When we selected the p elements and used css() method on it. The method returned the value red, which is the background color of first paragraph.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color of first matched element: " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<p style="background-color:red">This is the first paragraph.</p>
<p style="background-color:grey">This is the second paragraph.</p>
<p style="background-color:green">This is the third paragraph.</p>
<button>Get the first paragraph background color</button>
</body>
</html>Output:
Before button click:
After button click: The alert message shows the color as rgb(255, 0, 0) which is a representation of color red.
Example 2: jQuery css() – set css property value
In this example, we are using the css() method to set the css property value. When used for setting up value, this method set specified css for all matched elements.
Here we have three paragraphs, just like the above example. We are changing the font color of these paragraphs using css(). In this case css property is “color” and css property value is “green”. In the output screenshot, you can see that font color changed to “green” for all the p elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "green");
});
});
</script>
</head>
<body>
<p><b>This is the first paragraph.</b></p>
<p><b>This is the second paragraph.</b></p>
<p><b>This is the third paragraph.</b></p>
<button>Set the font color of all paragraphs</button>
</body>
</html>Output:
Before button click:
After button click:
Example 3: jQuery css() – set multiple css properties and value pairs
Here, we are using css() to set multiple css properties and value pairs. The css properties in this example are “color” & “font-size” and their values are “green” & “150%” respectively.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"color": "green", "font-size": "150%"});
});
});
</script>
</head>
<body>
<p><b>This is the first paragraph.</b></p>
<p><b>This is the second paragraph.</b></p>
<p><b>This is the third paragraph.</b></p>
<button>Set the values for multiple css properties</button>
</body>
</html>Output:
Before button click:
After button click: As you can see both the font color and font size has been changed to the values set by css() method.
