CSS()
method is used to return (get) or set style properties or values for selected elements. It facilitates you to get one or more CSS style properties.
<!DOCTYPE html>
<html>
<head>
<title>Return a CSS Property</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<h2>Free Time Learning</h2>
<p style="background-color:#ff0000">www.freetimelearning.com</p>
<p style="background-color:#00ff00">www.freetimelearning.com</p>
<p style="background-color:#0000ff">www.freetimelearning.com</p>
<button type="button" class="btn">Click Here! (Return background-color)</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Set a CSS Property</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "#0099da");
});
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<h2>Free Time Learning</h2>
<p style="background-color:#ff0000">www.freetimelearning.com</p>
<p style="background-color:#00ff00">www.freetimelearning.com</p>
<p style="background-color:#0000ff">www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
<button type="button" class="btn">Click Here! (Set a background-color of p)</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Set Multiple CSS Properties</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "#F60", "font-size": "26px"});
});
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<h2>Free Time Learning</h2>
<p style="background-color:#ff0000">www.freetimelearning.com</p>
<p style="background-color:#00ff00">www.freetimelearning.com</p>
<p style="background-color:#0000ff">www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
<button type="button" class="btn">Click Here! (Set multiple styles)</button>
</body>
</html>