Welcome to another tutorial, here you will learn how to get or set style properties using jQuery.
The css() method in jQuery is used to get the computed value of a CSS property or to set one or more CSS properties for the selected elements.
The css() method provides a quick way to apply the styles directly to the HTML elements (or inline styles) that are yet to be cannot be easily defined in a stylesheet.
The computed value of the CSS property of an element by just passing the property name as a parameter to the css() method. The basic syntax is shown below:
$(selector).css("propertyName");
The example below shows how to retrieve and display the computed value of the CSS background-color property of an <div> element if it is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get the Value of a CSS Property</title>
<style>
div{
width: 100px;
height: 100px;
margin: 10px;
cursor: pointer;
display: inline-block;
}
</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 this DIV element is: <b id="result"></b></p>
</body>
</html>The css() method has the ability to take property name and value as separate parameters in setting a single CSS property for the elements.
Below is the basic syntax:
$(selector).css("propertyName", "value");
The example below shows how to set the CSS background-color property of the <div> elements, to the color value blue if it is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set the Value of a CSS Property</title>
<style>
.box{
width: 100px;
height: 100px;
margin: 10px;
cursor: pointer;
border: 1px solid #cdcdcd;
display: inline-block;
}
</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>
<p><strong>Note:</strong> Click inside the empty box to fill the background color.</p>
</body>
</html>
In jQuery you can set multiple CSS properties with the css() method. Below is the basic syntax used in setting more than one property for the elements:
$(selector).css({"propertyName":"value", "propertyName":"value", ...});
The example below shows how you will set the background color and the padding CSS property for the selected elements at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set the Values of Multiple CSS Properties</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>