The jQuery CSS() method is used to get (return)or set style properties or values for selected elements. It facilitates you to get one or more style properties.
jQuery CSS() method provides two ways:
1) Return a CSS property
It is used to get the value of a specified CSS property.
Syntax:
css("propertyname"); Let’s take an example to demonstrate this property.
<!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:#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>Output:
This is a heading
The background-color of this paragraph is red.
The background-color of this paragraph is green.
The background-color of this paragraph is blue.Click here to get the background-color of first matched element
Note: The above example returns the background-color value of the first matched element.
2) Set a CSS property
This property is used to set a specific value for all matched element.
Syntax:
css("propertyname","value");
- <!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>
Output:
The background-color of this paragraph is red.
The background-color of this paragraph is green.
The background-color of this paragraph is blue.Click here to set a specific background-color of all matched element
3) Set multiple CSS properties
It is just an extension of Set CSS property. It facilitates you to add multiple property values together.
Syntax:
css({"propertyname":"value","propertyname":"value",...}); Let’s take an example to demonstrate this property. In this example we add two properties background-color and font-size for all element.
- <!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": "yellow", "font-size": "200%"});
- });
- });
- </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>
- <p>This paragraph has no background-color.</p>
- <button>Click here to set multiple styles for all selected elements.</button>
- </body>
- </html>
Output:
The background-color of this paragraph is red.
The background-color of this paragraph is green.
The background-color of this paragraph is blue.Click here to set multiple styles for all selected elements.
Leave a Reply