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 Return
With 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 Set
With 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>