jQuery | attr() Method - GeeksforGeeks

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

After Click on the button:

Example-2:

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

Before Click on the button:

After Click on the button:

Example-3:

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

Before Click on the button:

After Click on the button:

Example-4:

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

Output:

Before Click on the button:

After Click on the button:

My Personal Notes

Sep	OCT	Nov
	23
2019	2020	2021

Recommended Posts: