Skip to content
Related Articles

Related Articles

Improve Article

jQuery | attr() Method

  • Last Updated : 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)
  • 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:




<!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:
Before Click on the button:



After Click on the button:

Example-2:




<!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:

Before Click on the button:

After Click on the button:

Example-3:




<!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:

Before Click on the button:

After Click on the button:

Example-4:




<!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:

Before Click on the button:

After Click on the button:




My Personal Notes arrow_drop_up
Recommended Articles
Page :