css() MethodThe jQuery css() method is used to retrieve the computed value of a CSS property or to set one or more CSS properties for the selected elements.
This method provides a convenient way to apply styles directly to HTML elements (i.e., inline styles) that haven't been or can't easily be defined in a stylesheet.
You can retrieve the computed value of a CSS property of an element by passing the property name as a parameter to the css() method. Here's the basic syntax:
In the following example, clicking on a <div> element will retrieve and display the computed value of the CSS background-color property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
var color = $(this).css("background-color");
$("#result").html(color);
});
});
</script>
</head>
<body>
<div style="background-color:orange;"></div>
<div style="background-color:#ee82ee;"></div>
<div style="background-color:rgb(139,205,50);"></div>
<div style="background-color:#f00;"></div>
<p>The computed background-color property value of the clicked DIV element is: <b id="result"></b></p>
</body>
</html>The css() method can set a single CSS property for the elements by providing the property name and value as separate parameters. The basic syntax is:
In the following example, clicking on a <div> element will set the CSS background-color property to the color value blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
.box{
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #cdcdcd;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".box").click(function(){
$(this).css("background-color", "blue");
});
});
</script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>You can set multiple CSS properties using the css() method. The basic syntax for setting more than one property for the elements is:
In the following example, both the background-color and padding CSS properties will be set for the selected elements simultaneously.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
p{
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "padding": "20px"});
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p style="background-color:orange;">This a paragraph.</p>
<p style="background-color:#ee82ee;">This is another paragraph.</p>
<p style="background-color:rgb(139,205,50);">This is none more paragraph.</p>
<p>This is one last paragraph.</p>
<button type="button">Add CSS Styles</button>
</body>
</html>