Skip to content
Related Articles

Related Articles

jQuery attr() Method

Improve Article
Save Article
  • Last Updated : 27 Oct, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!