In jQuery, the **`attr()` method** is used to *set* or *return* the value of an element. To get the individual value for each element, a looping construct, ​such as jQuery’s `each()` method ​or `map()` method, is used.



# Code

The following codes explain how the value is set and returned using the `attr()` method.

The code is tested on the following image:

![](/api/edpresso/shot/6547361398521856/image/6350944155467776)

## Setting a value

The following code decreases the image's width from 300 to 200 pixels. Click on the button labeled `Click` to check the effect.

<!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:black;">   
            Educative</h1> 
        <h2> jQuery attr() Method</h2> 
        <h3 style="color:lightgreen;"></h3> 
        <img src= 
"/api/edpresso/shot/6547361398521856/image/6350944155467776"
             alt="" 
             width="300" 
             height="300" 
             class= 
             "alignnone size-medium wp-image-915678" /> 
        <br> 
        <br> 
        <button>Click</button> 
        <script> 
            $(document).ready(function() { 
                $("button").click(function() { 
                    $("img").attr("width", "200"); 
                }); 
                $("button").css("background-color","lightblue");
                $("button").css("width","100px");
                $("button").css("height","60px");

            }); 
        </script> 
    </center> 
</body> 
  
</html> 


codemirror

## Returning a value

The following code returns the image's width when the button labeled `Click`​ is clicked.

<!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:black;">   
            Educative</h1> 
        <h2> jQuery attr() Method</h2> 
        <h3 style="color:lightgreen;"></h3> 
        <img src= 
"/api/edpresso/shot/6547361398521856/image/6350944155467776"
             alt="" 
             width="300" 
             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")); 
                }); 
                $("button").css("background-color","lightblue");
                $("button").css("width","100px");
                $("button").css("height","60px");
            }); 
        </script> 
    </center> 
</body> 
  
</html> 


What is the jQuery attr() method?

Syntax

Code

Setting a value

Returning a value