Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery attr() Method
jQuery | attr() Method: Learn about the jQuery attr() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 15, 2022
attr() Method
The attributes of an element are the features that it presents. For an HTML element, an attribute 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 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 attributes, or you want to add some more attributes to the element. Hence, this can be achieved by using jQuery's method – attr().
The attr() method in jQuery helps to set or return the attribute of the selected element. When the attribute has to be returned, then the name of the property (attribute) is defined and it will return the value of the matched attribute of the element. When the attribute has to be set, then along with the property name, property value is also to be given.
attr() Method Syntax
$('selector').attr('propertyName');
$('selector').attr('propertyName','value');
This method sets the attribute of all the matched elements and returns the attribute value of the first matched element. We can also define a custom function as its event handler which will get fired once the attr() method is triggered.
Let's have a look at the following example which the one shows how to return a particular attribute name and the next one demonstrates how to set the attribute name for an element.
jQuery attr() 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 - Attribute</h2>
<p>Click the button to get the attributes of the selected elements.</p>
<button>Get Attribute</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(){
$('h3').html('Class of the div element is: ' + $('div').attr('class'));
})
});
</script>
</html>
Output:
jQuery attr() 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 - Attribute</h2>
<p>Click the button to set the attributes of the selected elements.</p>
<button>Set Attribute</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(){
$('div').attr('class','green');
$('h3').html('The attribute has been updated !');
})
});
</script>
</html>
Output:
