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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;"></h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132-120x300.png"
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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;"></h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132-120x300.png"
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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;">
</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132.png"
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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> jQuery attr() Method</h2>
<h3 style="color:lightgreen;"></h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221153831/1132.png"
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:
