How to retrieve attribute of an HTML tag using jQuery ?
Last Updated :
25 Mar, 2022
In this article, we will learn how do you retrieve attributes of an HTML tag using jQuery. We can use JQuery to make this done in a few lines of code. Here we are going to build an image zooming system where will see how can an attribute of the HTML tag can be retrieved and changed.
Using the attr() method: This method can be either used to set the attribute or to return the attribute which completely depends on the arguments passed within this function.
Syntax:
// Retrieve the value of the attribute
// of the first matched element
$(selector).attr(attribute)
// Set the value of matched element's attribute
$(selector).attr(attribute, value)
// Set multiple attributes and values
$(selector).attr({attribute1: value1, attribute2: value2,...})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1></h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="This is GFG Post"
width="250" height="250"><br>
<button>Zoom</button>
</body>
<script>
$(document).ready(function () {
$("button").click(function () {
// Setting width and image attribute
$("img").attr(
{ "width": 500, "height": 500 }
);
// Retrieving alt attribute value from the image tag
const heading = $("img").attr("alt");
$("h1").text(heading);
});
});
</script>
</html>
Output:
As you can see in the output that on clicking the zoom button width and height attributes of the image tag got changed. Also, we retrieved the alt attribute value from the image tag and set it inside the h1 tag.
The above task can also be done by replacing the attr() method with the prop method which does not make any change in output. Now the question arises which one to use?
Difference between attr() and prop(): The attr() method changes attributes for that HTML tag whereas prop() changes property for HTML tag as per the DOM tree. Let's understand this with an example.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<input type="text" name="test"
id="test" value="Test">
<button>Test</button>
</body>
<script>
$(document).ready(function () {
$("button").click(function () {
console.log(
"When using attr() method: " +
$("#test").attr("value")
);
console.log(
"When using prop() method: " +
$("#test").prop("value")
);
})
})
</script>
</html>
Output:
The above output shows that if you want the default value for any HTML tag then, use the attr() function. If you want attribute value to be changed by the user (such as inputs, checkboxes, radios, etc.) then use the prop() function to get the updated value.
Similar Reads
How to remove all attributes of an HTML element using jQuery ? In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, f
1 min read
How to Add and Remove HTML Attributes with jQuery? Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery. Below are the possib
2 min read
How to get the outer html of an element using jQuery ? Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to
2 min read
How to get title of current HTML page using jQuery ? Suppose you have given an HTML page and the task is to get the title of an HTML page with the help of only jQuery. There are two approaches that are discussed below: Approach 1: The $('title') jQuery selector is used to select the title element of the document and we can use text() method on the sel
2 min read
How to use *= operator in jQuery attribute selector ? This article will show you an idea of using the *= operator in jQuery attribute selectors. The *= operator is used to select the sub-string attribute and apply operations on it. Syntax: $("div[myAttr*='GFG']").jQueryMethod({ // Code }) Approach: We will create HTML div elements with some attributes.
2 min read
How to Get the Value of an Input Text Box using jQuery? When working with forms or interactive web pages, sometimes need to get the values entered into the input fields. This article provide a complete guide on how to get the value o an input text box using jQuery. Below are the different approaches to get the value of an input text box using jQuery:Get
2 min read