jQuery provides css() method to manipulate CSS properties of the matched elements.
JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements.
jQuery – Get CSS Properties
jQuery css() method can be used to get the value of a CSS property associated with the first matched HTML element. Following is the syntax of the css() method:
$(selector).css(propertyName);
jQuery understands and returns the correct value for both css( “background-color” ) and css( “backgroundColor” ).
Example
Let’s try the following example and verify the result. This should return the background color of the first matched <div>.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
alert("Background color = " + $("div").css("background-color"));
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Get CSS Property</button>
</body>
</html>
jQuery – Set CSS Properties
jQuery css() method can be used to set the value of one or more CSS properties associated with the matched HTML element. Following is the syntax of the css() method:
$(selector).css(propertyName, value);
Here both the parameters are required, propertyName represents a CSS property name where as value represents a valid value of the property.
Example
Let’s try the following example and verify the result. Here we will take the color of the first matched <div> and will change the text color of all <p> using the div background-color.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var color = $("div").css("background-color");
$("p").css("color", color);
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Set CSS Property</button>
</body>
</html>
jQuery – Set Multiple CSS Properties
You can apply multiple CSS properties on the matched elements using a single jQuery method css(). You can apply as many properties as you like in a single call.
Following is the syntax of the css() method to set multiple CSS properties:
$(selector).css({propertyName1:value1, propertyName2:value2,...});
Example
Let’s try the following example and verify the result. Here we will set background color of all the <div> to “#fb7c7c;” and font-size to 25px.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").css({"background-color":"#fb7c7c", "font-size": "25px"});
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Set CSS Property</button>
</body>
</html>