Description:
Jquery .css() method Get/set the css property for the matched elements.
Syntax
GET Property: .css( propertyName )
SET Property: .css( propertyName, value )
| propertyName | A css property name |
| value | A value to set for the property |
Note :
To set multiple value, the syntax will be
.css({“propertyname”:”value”,”propertyname”:”value”,…});
GET CSS Property value :
It will return the value for specified CSS property value for the matched element
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert("Background color = " + $("#divBlogName").css("background-color"));
});
});
</script>
</head>
<body>
<h2>Jquery .css() Method </h2></br>
<div id="divBlogName" style="background-color:#00ff21">This is dotnet-helpers.com</div></br>
<button>Display the background color</button>
</body>
</html>
Output:
SET CSS Property :
It will set CSS property for the matched element.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#divBlogName").css("background-color","#00ff21");
});
});
</script>
</head>
<body>
<h2>Jquery .css() Method </h2></br>
<div id="divBlogName">This is dotnet-helpers.com</div></br>
<button>Display the background color</button>
</body>
</html>
Output:
Clicking the button, the background-color porperty will set to the div(divBlogName) as shown below.
