jQuery css() Method, Easy To Learn jQuery jQuery css() Method

jQuery css() Method

The jQuery CSS() method is used to return (get) or set style properties or values for selected elements. It facilitates you to get one or more CSS style properties.

This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven't been or can't easily be defined in a stylesheet.

Return (get) a CSS Property

It is used to return the value of a specified CSS property. Here's the basic syntax:

Syntax :

css("propertyname");

The following example will return the background-color value of the FIRST matched element :

	
<!DOCTYPE html>
<html>
<head>
<title>Return a CSS Property</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        alert("Background color = " + $("p").css("background-color"));
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<h2>Free Time Learning</h2>
 
<p style="background-color:#ff0000">www.freetimelearning.com</p>
<p style="background-color:#00ff00">www.freetimelearning.com</p>
<p style="background-color:#0000ff">www.freetimelearning.com</p>
 
<button type="button" class="btn">Click Here! (Return background-color)</button>
 
</body>
</html>

Output :

Set a CSS Property

This property is used to set a specific value for all matched element. The basic syntax can be given :

Syntax :

css("propertyname","value");

<!DOCTYPE html>
<html>
<head>
<title>Set a CSS Property</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").css("background-color", "#0099da");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<h2>Free Time Learning</h2>
 
<p style="background-color:#ff0000">www.freetimelearning.com</p>
<p style="background-color:#00ff00">www.freetimelearning.com</p>
<p style="background-color:#0000ff">www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
 
<button type="button" class="btn">Click Here! (Set a background-color of p)</button>
 
</body>
</html>

Output :

Set Multiple CSS Properties

You can also set multiple CSS properties with the css() method. The basic syntax for setting the more than one property for the elements can be given with:

Syntax

css({"propertyname":"value","propertyname":"value",...});

The following example will set a background-color and a font-size for ALL matched elements :

<!DOCTYPE html>
<html>
<head>
<title>Set Multiple CSS Properties</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "#F60", "font-size": "26px"});
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<h2>Free Time Learning</h2>
 
<p style="background-color:#ff0000">www.freetimelearning.com</p>
<p style="background-color:#00ff00">www.freetimelearning.com</p>
<p style="background-color:#0000ff">www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
 
<button type="button" class="btn">Click Here! (Set multiple styles)</button>
 
</body>
</html>

Output :

jQuery Tutorial