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:
