How to use jQuery attr() method – Tutorial with codes to download

The jQuery Attr method – .attr(), gets or sets the value of HTML attributes of elements. The HTML attributes can be width, height, title, value, src, href, etc.

Get the value – It can get a single value of an element at a time.

Set the value – It can set multiple values of multiple elements at a time.

Syntax of .attr() method

a. Returning an HTML attribute value of an element

$(element).attr(attribute)

b. Setting one single attribute value of one or more elements.

$(selector).attr(attribute,value)

c. Using function to set one single attribute value of one or more elements

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

d. Set multiple attributes values of one or more elements

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

Example 1: Get Width of an Image

The page has one image with a button.

<img src="animal.jpg" width="500" height="400" />
<button id="button1">Show Width</button>

To get the width of the image I can use .attr() method like this:

$("#button1").click(function (e) {
    alert("Width is: " + $("img").attr("width"));
});

The alert message box will show Width is: 500.

Example 2: Set Width of 2 Images

Here I have 2 images and a button.

<img src="cat1.jpg" width="400" height="300" />
<img src="cat2.jpg" width="550" height="350" />
<button id="button2">Set Width</button>

On the button click event I can set the width of these 2 images to 200 px by using jQuery Attr method.

$("#button2").click(function (e) {
    $("img").attr("width", "200")
});

So on the button click event the width of these 2 images are set to 200 px.

Example 3: Set Height of 2 Images using function

The page has 2 images and a button.

<img src="cat1.jpg" width="400" height="300" />
<img src="cat2.jpg" width="550" height="350" />
<button id="button3">Set Height</button>

This time I have used the function parameter of the jQuery attr method.

The function parameter will loop through each element of the selector (which are the 2 images).

In this function parameter I am returning the height as 150 and this sets the height of both the images to 150 px.

$("#button3").click(function (e) {
    $("img").attr("height", function (index, currentvalue) {
        return 150;
    });
});

Example 4: Decrease Height of Images by 50px (on every button click), using function

The page has 2 images and a button.

<img src="cat1.jpg" width="400" height="300" />
<img src="cat2.jpg" width="550" height="350" />
<button id="button4">Decrease Height</button>

Here I will to decrease the height of these 2 images by 50 pixels, every time the button is clicked.

I will use the second parameter (currentvalue) of the function. This will give the height of the element. Then I am subtracting 50 from it and returning the new height value for the element.

In this way I am decreasing the height by 50 pixels of these 2 images on every button click.

$("img").attr("height", function (index, currentvalue) {
    return currentvalue - 50;
});

Example 4: Set multiple attributes using jQuery Attr Method

I have 2 images and a button. On the button click event I will set multiple attributes of these 2 images. These attributes are width, height and src.

<img src="cat1.jpg" width="400" height="300" />
<img src="cat2.jpg" width="550" height="350" />
<button id="button5">Set Height, Width & Src</button>

In the jQuery Attr Method I am passing multiple attributes values in comma separated manner.

.attr({"attr1": "value1","attr2": "value2","attr3": "value3",....})

So the below .attr() code becomes.

$("#button5").click(function (e) {
    $("#div5 img").attr({ "width": "600", "height": "500", "src": "dog1.jpg"});
});

This will set 3 attributes of the 2 images.

Please check the below link:

DOWNLOAD