Example 1
Code: Select all
<!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>Example 2
Code: Select all
<!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>Example 3
Code: Select all
<!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>