To get and set/change css property using jQuery; In this tutorial, you will learn how to change CSS properties like background color, font size, styling, font color etc., of HTML elements using the jQuery css() method.
How to change CSS Class Property using jQuery
In jQuery, the .css() method is used to get or set the CSS properties of elements in a webpage. It allows you to manipulate the styling of HTML elements dynamically using JavaScript. The method can be used to retrieve the current value of a specific CSS property or to set one or more CSS properties for selected elements.
The syntax for using the .css() method is as follows:
$(selector).css(propertyName);
$(selector).css(propertyName, value);
$(selector).css({ propertyName1: value1, propertyName2: value2, ... });
$(selector)refers to the jQuery selector for the HTML element(s) you want to manipulate.propertyNameis the name of the CSS property you want to get or set.valueis the new value you want to set for the CSS property.- If you use an object with multiple property-value pairs, you can set multiple properties at once.
Example 1 – To get css property of html element using jQuery css()
It can be used to get the value of a specified CSS property.
<!DOCTYPE html>
<html>
<title>Learn Jquery Css Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</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>
<button id="btn_click">Click here to get all css property</button>
</body>
</html>
Example 2 – To get all matched css property of html element using jQuery css()
This property is used to determine a specific value for all matching elements.
<!DOCTYPE html>
<html>
<title>Learn Jquery val Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
$("p").css("background-color", "green");
});
});
</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 id="btn_click">Click here to set background color of all matched content</button>
</body>
</html>
In the above example, you can see that, set the all matched property background color using css() method.
Example 3 – To set/change all css property of html element using jQuery css()
This method gives you the convenience of adding multiple property values together.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_button").click(function(){
$("p").css({"background-color": "green", "font-size": "300%"});
});
});
</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>
<button id="btn_button">Click here to set multiple styles for all selected elements.</button>
</body>
</html>
In the above example 3, you can see that, set the all-matched mutlitple property background color, font-size using css() method.
