jQuery css()
The jQuery css() method is applied on an html element. It is used to set or get value of one or more style properties of the html element.
Syntax - jQuery css()
Following is the syntax to use css() method
-
Get CSS Property Value
To get the value of specified CSS property corresponding to the HTML Element,$("htmlElement").css("css_property");
-
Set CSS Property Value
To set the value of specified CSS property corresponding to the HTML Element,$("htmlElement").css("css_property", "value");
Examples - jQuery css()
Following examples help you understand the usage of jQuery css() method :
- Get value of css property
- Set value to css property
- Set values to multiple css properties in a single line
Example - Get value of css property
In the following jQuery css() example, we shall get value of css property of an HTML Element to a variable, and write it to a paragraph element.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// get value of css property : color of <p> with id = #exPid
var cssPropValue = $("#exPid").css("color");
// displaying the value in p#exOutput
$("#exOutput").text(cssPropValue);
});
</script>
</head>
<body>
<p id="exPid" style="color:rgb(0, 170, 0)">Learning jQuery css().</p>
<p id="exOutput"></p>
</body>
</html>
Output
Learning jQuery css().
rgb(0, 170, 0)
Example - Set value to css property
In the following jQuery css() example, we shall set value of css property for an HTML Element.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// set value of css property : color for <p> with id = #exPid
var cssPropValue = $("p#exPid").css("color", "blue");
var cssPropValue = $("p#exPid").css("border", "1px solid grey");
});
</script>
</head>
<body>
<p id="exPid">Learning jQuery css().</p>
</body>
</html>
Output
Learning jQuery css().
Example - Set values to multiple css properties in a single line
Following jQuery css() example demonstrates how to set values to multiple css properties in a single statement using jQuery Method Chaining.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// set value of multiple css properties
var cssPropValue = $("p#exPid").css("color", "blue").css("border", "1px solid #CCC").css("border-radius", "4px").css("padding", "5px");
});
</script>
</head>
<body>
<p id="exPid">Learning jQuery css().</p>
</body>
</html>
Output
Learning jQuery css().
Conclusion
In this jQuery Tutorial, we have learnt jQuery css() method : Syntax and Usage with examples.