Hello friends today I will tell you through the tutorial how you can use css method in jquery. I will tell you step by step. So let's go.
jQuery CSS() method provides different ways.
1) CSS property ReturnWith this, you can get the property value of specified css. syntax:
css("propertyname");
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:green;"> background color of this paragraph is green.</p>
<p style="background-color:red;"> background color of this paragraph is red.</p>
<p style="background-color:blue"> background color of this paragraph is blue.</p>
<button>Click here to get the background color</button>
</body>
</html>
2) CSS property SetWith this, you can set the specific value for all matched element. Syntax:
css("propertyname","value");
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "violet");
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000"> background color of this paragraph is red.</</p>
<p style="background-color:#00ff00"> background color of this paragraph is green.</</p>
<p style="background-color:#0000ff"> background color of this paragraph is blue.</</p>
<p>This paragraph has no background-color. </p>
<button>Click here to set a specific background color</button>
</body>
</html>