jQuery | attr() Method

27 Feb, 2019
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)
$(selector).attr(attribute)
To set the attribute and value:$(selector).attr(attribute, value)
$(selector).attr(attribute, value)
To set attribute and value using a function:$(selector).attr(attribute, function(index, currentvalue))
$(selector).attr(attribute, function(index, currentvalue))
To set multiple attributes and values:$(selector).attr({attribute:value, attribute:value, ...})
$(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:
<!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:Before Click on the button:
After Click on the button:
Example-2:
<!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:
Before Click on the button:
After Click on the button:
Example-3:
<!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:
Before Click on the button:
After Click on the button:
Example-4:
<!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:
Before Click on the button:
After Click on the button:
jQuery-Methods
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?