Jquery CSS
To get (return)or set style properties or values for selected components, utilize the jQuery CSS() function. It makes it easier for you to acquire one or more style properties.
There are two ways to use the jQuery CSS() method:
1) Give me a CSS attribute.
It's used to get the value of a CSS property that's been specified.
Syntax:\scss("propertyname");
Let's look at an example to show how this property works.
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<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:#ff0000">The background-color of this paragraph is red.</p>
<p style="background-color:#00ff00">The background-color of this paragraph is green.</p>
<p style="background-color:#0000ff">The background-color of this paragraph is blue.</p>
<button>Click here to get the background-color of first matched element</button>
</body>
</html>
]]>
2) Set a CSS property.
This attribute is used to give all matched elements the same value.
Syntax:
css("propertyname","value");
<![CDATA[
<!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">The background-color of this paragraph is red.</</p>
<p style="background-color:#00ff00">The background-color of this paragraph is green.</</p>
<p style="background-color:#0000ff">The 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 of all matched element</button>
</body>
</html>
]]>
