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=
</script>
</head>
<body>
<h1></h1>
<img src=
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=
</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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...