css()

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:

snippet

css("propertyname");

Let's take an example to demonstrate this property.

snippet

<!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.

Note

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:

snippet

css("propertyname","value");

snippet

<!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.

3) Set multiple CSS properties

It is just an extension of Set CSS property. It facilitates you to add multiple property values together.

Syntax:

snippet

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.

snippet

<!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.