jQuery Get and Set CSS Properties
In this tutorial you will learn how to get or set style properties using jQuery.
jQuery css() Method
The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements.
This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven't been or can't easily be defined in a stylesheet.
Get a CSS Property Value
You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax:
The following example will retrieve and display the computed value of the CSS background-color property of a <div> element, when it is clicked.
Example
Try this code »<!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>Set a Single CSS Property and Value
The css() method can take a property name and value as separate parameters for setting a single CSS property for the elements. The basic syntax can be given with:
The following example will set the CSS background-color property of the <div> elements, to the color value blue, when it is clicked.
Example
Try this code »<!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>Set Multiple CSS Properties and Values
You can also set multiple CSS properties with the css() method. The basic syntax for setting the more than one property for the elements can be given with:
The following example will set the background-color as well as the padding CSS property for the selected elements at the same time.
Example
Try this code »<!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>
