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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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.
