Open In App
Related Articles

jQuery attr() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads