jQuery attr() Method

Last Updated : 27 Oct, 2022

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>