Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery prop() Method
jQuery | prop() Method: Learn about the jQuery prop() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 16, 2022
prop() Method
The properties of elements are the features that it represents. For an HTML element, the property can be anything like – representing the text color, the font size, font family, name, id, value, class, effects, etc. These all can be termed as attributes/properties of an element in HTML. Therefore, if these are taken into consideration then there might be a situation when you need to alter some of these declared properties and their values, or you want to add some more attributes to the element. Hence, this can be achieved by using jQuery's method – prop().
The prop() method in jQuery helps to set or return the property of the selected element. When the property has to be returned, then the name of the property (attribute) is defined and it will return the value of the matched property value of the element. When the property has to be set, then along with the property name, property value is also to be given.
This method is a lot similar to the attr() method of jQuery and it kind off also does the same task for the selected elements.
prop() Method Syntax
$('selector').prop('propertyName');
$('selector').prop('propertyName','value');
This method sets the attribute of all the matched elements and returns the property value of the first matched element. We can also define a custom function as its event handler which will get fired once the prop() method is triggered.
Let's have a look at the following example which the one shows how to return a particular property name and the next one demonstrates how to set the property name for an element.
jQuery prop() Method Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.green{
font-size: larger;
font-weight: bolder;
color: green;
}
.blue{
font-size: larger;
font-weight: bolder;
color:darkblue;
}
</style>
<title>Document</title>
</head>
<body>
<h2>jQuery - Property</h2>
<p>Click the button to get the Property of the selected elements.</p>
<button>Get Property</button>
<hr>
<p class="green">This is sentence in green.</p>
<div class="blue">This is sentence in blue.</div>
<h4 class="green">This is sentence in green.</h4>
<hr>
<h3 style="color:crimson ;"></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var property = $('div').prop('class');
$('h3').html('The div containns ' + property + ' class.');
})
});
</script>
</html>
Output:
jQuery prop() Method Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.green{
font-size: larger;
font-weight: bolder;
color: green;
}
.blue{
font-size: larger;
font-weight: bolder;
color:darkblue;
}
</style>
<title>Document</title>
</head>
<body>
<h2>jQuery - Property</h2>
<p>Click the button to set the Property of the selected elements.</p>
<button>Set Property</button>
<hr>
<p class="green">This is sentence in green.</p>
<div class="blue">This is sentence in blue.</div>
<h4 class="green">This is sentence in green.</h4>
<hr>
<h3 style="color:crimson ;"></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('p').prop('class','blue');
$('h3').html('The property has been updated !');
})
});
</script>
</html>
Output:
