The attr() method in jQuery is used to set or return the attributes and values of the selected elements.
Syntax:
- To return the value of an attribute:
$(selector).attr(attribute)
- To set the attribute and value:
$(selector).attr(attribute, value)
- To set attribute and value using a function:
$(selector).attr(attribute, function(index, currentvalue))
- To set multiple attributes and values:
$(selector).attr({attribute:value, attribute:value, ...})
Parameter
- attribute: This parameter is used to specify the name of the attribute
- value: It is used to specify the value of the attribute
- function(index, currentvalue): It is used to specify a function that returns the attribute value to set
- index: Index position of the element received with the help of this parameter.
- currentvalue: It is used to receive the current attribute value of selected elements.
Example 1: In this example, the image will expand when the button is clicked.
HTML
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method
</ title >
< script src =
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" ></ h3 >
< img src =
alt = "" width = "120" height = "300"
class = "alignnone size-medium wp-image-915678" />
< br >< br >
< button >Click</ button >
< script >
$(document).ready(function () {
$("button").click(function () {
$("img").attr("width", "300");
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 2: In this example, a pop-up will show the width of the image when the button is clicked.
HTML
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method</ title >
< script src =
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" ></ h3 >
< img src =
alt = "" width = "120" height = "300"
class = "alignnone size-medium wp-image-915678" />
< br >
< br >
< button >Click</ button >
< script >
$(document).ready(function () {
$("button").click(function () {
alert("Image width: " +
$("img").attr("width"));
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 3: In this example, the image will become thin when the button is clicked.
HTML
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method</ title >
< script src =
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" >
</ h3 >
< img src =
alt = "" width = "120" height = "300"
class = "alignnone size-medium wp-image-915678" />
< br >
< br >
< button >Click</ button >
< script >
$(document).ready(function () {
$("button").click(function () {
$("img").attr("width", function (n, v) {
return v - 50;
});
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 4: In this example, the image will shrink when the button is clicked.
HTML
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method
</ title >
< script src =
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" ></ h3 >
< img src =
alt = "" width = "120" height = "300"
class = "alignnone size-medium wp-image-915678" />
< br >< br >
< button >Click</ button >
< script >
$(document).ready(function () {
$("button").click(function () {
$("img").attr({
width: "150",
height: "100"
});
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Last Updated :
27 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...