css() method in Jquery

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>

<html>

<head>

$(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>