jQuery attr() Method

Quiz

The attr() method in jQuery is used to get or set attributes of HTML elements. It allows manipulation of attributes such as id, class, src, href, etc., of the HTML elements.

Syntax

The attr() method in jQuery has different syntaxes to return and set the attribute values. We described them below −

Following is the syntax to return the value of an attribute:

$(selector).attr(attribute)

Following is the syntax to set the attribute and value:

$(selector).attr(attribute,value)

Following is the syntax to set the attribute and value using a function:

$(selector).attr(attribute,function(index,currentvalue))

Following is the syntax to set multiple attributes and values:

$(selector).attr({attribute:value, attribute:value,...})

Parameters

This method accepts the following parameters −

attribute: This specifies the name of the attribute.
value: This specifies the value of the attribute.
function(index,currentvalue): A callback function to manipulate the attribute value.

index: The index position of the element in the set of matched elements.
currentvalue: The current value of the attribute being manipulated.

Example 1

In the following example, we are using the attr() method to set the width attribute of all <div> element −

<html>
<head>
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").css("width", "30%");
      });
    });
  </script>
</head>
<body>
  <div style="border: 2px solid green; background-color: yellow; width: 15%;">Hello...I'm Div element.</div>
  <div style="border: 2px solid green; background-color: yellow; width: 15%;">Hello...I'm Div element.</div>
  <button>Click</button>
</body>
</html>

When we execute the above program, it sets the width of "30%" to all the <div> elements present in the DOM.

Example 2

In this example, we are returning the "width" attribute value of <img> element −

<html>
<head>
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert("Width of the first div element is: " + $("img").attr("width"));
      });
    });
  </script>
</head>
<body>
  <img src="https://pixabay.com/photos/puppy-pet-canine-dog-animal-lying-2785074/" width="40%" height="150">
  <br>
  <button>Click</button>
</body>
</html>

If we execute the above program, it gives an alert with the width value of the image element.

Example 3

Here, we are using a function to decrease the width of the image by 50 −

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("img").attr("width", function(index, currentValue){
          return currentValue - 50;
        });
      });
    });
    </script>
</head>
<body>
<img src="https://pixabay.com/photos/puppy-pet-canine-dog-animal-lying-2785074/" width="500" height="150"><br>
<button>Decrease image width by 50px</button>
</body>
</html>

When we click the button, the image width will be reduced by 50.

Example 4

In this example, we are setting multiple attributes and values for all the <div> element −

<html>
<head>
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").css({width: "30%", height: "10%"});
      });
    });
  </script>
</head>
<body>
  <div style="border: 2px solid green; background-color: yellow; width: 15%;">Hello...I'm Div element.</div>
  <div style="border: 2px solid green; background-color: yellow; width: 15%;">Hello...I'm Div element.</div>
  <button>Click</button>
</body>
</html>

After clicking the button, the width and height of all div elements will be modified.

jquery_ref_html.htm

Print Page