jQuery 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:

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> 

Test it Now

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: 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:

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

Test it Now

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:

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>

Test it Now

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.

Next TopicjQuery before()

← prev next →